commit
553cdd3657
@ -0,0 +1,94 @@ |
||||
<template> |
||||
<el-checkbox-group v-model="modelValue"> |
||||
<el-checkbox v-if="allText" class="no-cicrle" label="全部" @change="handleAll">全部</el-checkbox> |
||||
<el-checkbox v-for="(item, index) in list" :key="index" class="no-cicrle" :label="item[name]" @change="handleChange"> |
||||
{{ item[label] }} |
||||
</el-checkbox> |
||||
</el-checkbox-group> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
value: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
allText: { |
||||
// 是否展示 "全部"，有字则展示 |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
showBottomLine: { |
||||
// 是否展示底部下划线，类似tab标签页 |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
list: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
label: { |
||||
// key |
||||
type: String, |
||||
default: 'label' |
||||
}, |
||||
name: { |
||||
// value |
||||
type: String, |
||||
default: 'value' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
modelValue: undefined |
||||
}; |
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler(val) { |
||||
if (this.allText) { |
||||
this.modelValue = val.length > 0 ? val : ['全部']; |
||||
} else { |
||||
this.modelValue = val.filter((item) => item !== '全部'); |
||||
} |
||||
}, |
||||
deep: true, |
||||
immediate: true |
||||
} |
||||
}, |
||||
methods: { |
||||
handleAll() { |
||||
this.modelValue = ['全部']; |
||||
this.$emit('input', []); |
||||
}, |
||||
handleChange() { |
||||
if (this.modelValue.some((item) => item === '全部')) { |
||||
this.modelValue.shift(); |
||||
} else if (this.modelValue.length == 0) { |
||||
this.modelValue = ['全部']; |
||||
} |
||||
this.$emit('input', this.modelValue.every((item) => item === '全部') ? [] : this.modelValue); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.no-cicrle { |
||||
::v-deep .el-checkbox__input, |
||||
.el-checkbox__input { |
||||
display: none; |
||||
} |
||||
::v-deep .el-checkbox__label { |
||||
padding-left: 0; |
||||
font-size: 16px; |
||||
line-height: 16px; |
||||
color: rgba($color: #000000, $alpha: 0.6); |
||||
} |
||||
} |
||||
.no-cicrle.is-checked ::v-deep .el-checkbox__label { |
||||
color: #0075ff; |
||||
font-weight: bold; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,102 @@ |
||||
<template> |
||||
<div :class="{ 'border-bottom': showBottomLine }"> |
||||
<el-radio-group v-model="modelValue" @change="handleChange"> |
||||
<el-radio v-if="allText" class="no-cicrle" :style="{'margin-bottom': gutter}" label="全部">全部</el-radio> |
||||
<el-radio v-for="(item,index) in list" :key="index" class="no-cicrle" :style="{'margin-bottom': gutter}" :label="item[name]"> |
||||
{{ item[label] }} |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
value: [String, Number], |
||||
allText: { |
||||
// 是否展示 "全部"，有字则展示 |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
showBottomLine: { |
||||
// 是否展示底部下划线，类似tab标签页 |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
list: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
label: { |
||||
// key |
||||
type: String, |
||||
default: 'label' |
||||
}, |
||||
name: { |
||||
// value |
||||
type: String, |
||||
default: 'value' |
||||
}, |
||||
gutter: { |
||||
// 上下间隔 |
||||
type: String, |
||||
default: '0' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
modelValue: undefined |
||||
}; |
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler(val) { |
||||
this.modelValue = val || '全部'; |
||||
}, |
||||
deep: true, |
||||
immediate: true |
||||
} |
||||
}, |
||||
methods: { |
||||
handleChange(value) { |
||||
this.$emit('input', this.modelValue === '全部' ? undefined : this.modelValue); |
||||
this.$emit('change', this.modelValue === '全部' ? undefined : this.modelValue); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.border-bottom { |
||||
width: 100%; |
||||
border-bottom: 2px solid rgba($color: #000000, $alpha: 0.08); |
||||
::v-deep .is-checked .el-radio__label { |
||||
position: relative; |
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: -10.5px; |
||||
right: 0; |
||||
height: 2px; |
||||
background-color: #0075ff; |
||||
} |
||||
} |
||||
} |
||||
.no-cicrle { |
||||
::v-deep .el-radio__input, |
||||
.el-checkbox__input { |
||||
display: none; |
||||
} |
||||
::v-deep .el-radio__label { |
||||
padding-left: 0; |
||||
font-size: 16px; |
||||
line-height: 16px; |
||||
color: rgba($color: #000000, $alpha: 0.6); |
||||
} |
||||
} |
||||
.no-cicrle.is-checked ::v-deep .el-radio__label { |
||||
color: #0075ff; |
||||
font-weight: bold; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,48 @@ |
||||
<template> |
||||
<div> |
||||
<el-form ref="form" :model="searchForm" label-width="100px"> |
||||
<el-form-item label-width="0"> |
||||
<DMRadio v-model="searchForm.quickSearch" show-bottom-line :list="quickList" /> |
||||
</el-form-item> |
||||
<el-form-item label="意向状态："> |
||||
<DMRadio v-model="searchForm.status" :list="statusList" all-text="全部" /> |
||||
</el-form-item> |
||||
<el-form-item label="意向状态2："> |
||||
<DMCheckbox v-model="searchForm.status2" :list="statusList" /> |
||||
</el-form-item> |
||||
<el-button type="primary" @click="$emit('search')">查询</el-button> |
||||
|
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import DMRadio from '@/components/DMRadio'; |
||||
import DMCheckbox from '@/components/DMCheckbox'; |
||||
export default { |
||||
components: { |
||||
DMRadio, |
||||
DMCheckbox |
||||
}, |
||||
data() { |
||||
return { |
||||
searchForm: { |
||||
quickSearch: 1, |
||||
status: undefined, |
||||
status2: [] |
||||
}, |
||||
quickList: [ |
||||
{ value: 1, label: '我创建的' }, |
||||
{ value: 2, label: '我的有效' } |
||||
], |
||||
statusList: [ |
||||
{ value: 1, label: 'A高意向' }, |
||||
{ value: 2, label: 'B中意向' } |
||||
] |
||||
}; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
</style> |
||||
Loading…
Reference in new issue