102 lines
2.0 KiB
Vue
102 lines
2.0 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
|
||
<checkbox-group :name="name">
|
||
<slot></slot>
|
||
</checkbox-group>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
|
||
<fui-form-field :name="name" v-model="vals">
|
||
<slot></slot>
|
||
</fui-form-field>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "fui-checkbox-group",
|
||
emits: ['change', 'input', 'update:modelValue'],
|
||
// #ifdef MP-WEIXIN
|
||
behaviors: ['wx://form-field-group'],
|
||
// #endif
|
||
// #ifdef MP-BAIDU || MP-QQ || H5
|
||
behaviors: ['uni://form-field'],
|
||
// #endif
|
||
props: {
|
||
name: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// #ifdef VUE3
|
||
modelValue: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
// #endif
|
||
value: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
vals: ''
|
||
};
|
||
},
|
||
watch: {
|
||
// #ifdef VUE3
|
||
modelValue(vals) {
|
||
this.modelChange(vals)
|
||
},
|
||
// #endif
|
||
value(vals) {
|
||
this.modelChange(vals)
|
||
}
|
||
},
|
||
created() {
|
||
this.childrens = []
|
||
},
|
||
methods: {
|
||
checkboxChange(e) {
|
||
this.$emit('change', e)
|
||
// TODO vue2 兼容
|
||
this.$emit('input', e.detail.value)
|
||
// TODO vue3 兼容
|
||
// #ifdef VUE3
|
||
this.$emit("update:modelValue", e.detail.value);
|
||
// #endif
|
||
},
|
||
changeValue(checked, target) {
|
||
let vals = []
|
||
this.childrens.forEach(item => {
|
||
if (item.val) {
|
||
vals.push(item.value);
|
||
}
|
||
})
|
||
this.vals = vals;
|
||
let e = {
|
||
detail: {
|
||
value: vals
|
||
}
|
||
}
|
||
this.checkboxChange(e)
|
||
},
|
||
modelChange(vals) {
|
||
this.childrens.forEach(item => {
|
||
if (vals.includes(item.value)) {
|
||
item.val = true;
|
||
} else {
|
||
item.val = false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped></style> |