You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
1.9 KiB
105 lines
1.9 KiB
6 months ago
|
<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
|
||
|
|
// #ifdef VUE2
|
||
|
|
value: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
vals: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
// #ifdef VUE3
|
||
|
|
modelValue(vals) {
|
||
|
|
this.modelChange(vals)
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
// #ifdef VUE2
|
||
|
|
value(vals) {
|
||
|
|
this.modelChange(vals)
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
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) {
|
||
|
|
const 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>
|