98 lines
1.8 KiB
Vue
98 lines
1.8 KiB
Vue
<template>
|
|
<div class="AiCheckbox">
|
|
<div
|
|
class="AiCheckbox-item"
|
|
v-for="(item, index) in options"
|
|
@click="onChange(item.value)"
|
|
:class="[choosed.indexOf(item.value) > -1 ? 'active' : '']"
|
|
:key="index">
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiCheckbox',
|
|
|
|
model: {
|
|
event: 'input',
|
|
prop: 'value'
|
|
},
|
|
|
|
props: {
|
|
value: Array,
|
|
placeholder: {
|
|
default: '请选择'
|
|
},
|
|
list: {
|
|
default: () => []
|
|
},
|
|
dict: String,
|
|
disabled: Boolean
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
dictKey: '',
|
|
choosed: []
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
options () {
|
|
return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
|
|
value: e.dictValue,
|
|
label: e.dictName
|
|
})) : this.list
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.$dict.load(this.dict).then(() => {
|
|
this.dictKey = this.dict
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
onChange (value) {
|
|
if (this.choosed.indexOf(value) > -1) {
|
|
this.choosed.splice(this.choosed.indexOf(value), 1)
|
|
} else {
|
|
this.choosed.push(value)
|
|
}
|
|
|
|
this.$emit('input', this.choosed)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiCheckbox {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.AiCheckbox-item {
|
|
width: 100%;
|
|
line-height: 1.3;
|
|
padding: 20px 32px;
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
border-radius: 16px;
|
|
color: #333333;
|
|
font-size: 28px;
|
|
border: 1px solid #CCCCCC;
|
|
|
|
&.active {
|
|
background: #4181FF;
|
|
color: #fff;
|
|
border-color: #4181FF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|