125 lines
2.8 KiB
Vue
125 lines
2.8 KiB
Vue
<template>
|
||
<view class="tm-groupcheckbox " :class="[customClass]">
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 复选框组
|
||
* @description 此组件必须，配合tm-checkbox组件使用，不可单独使用。
|
||
* @property {Number} max = [999] 最大选择数量
|
||
* @property {String} name = [] 默认：''，提交表单时的的字段名称标识
|
||
* @property {String} customClass = [] 默认：''，自定义class
|
||
* @property {Function} change 任何一个checkekBox改变将会触发此事件，并携带选中的数组数据。
|
||
* @property {Function} error 如果超过最大选择数量将会触发此事件。
|
||
* @example <tm-groupcheckbox><tm-checkbox v-model="checked" label="苹果"></tm-checkbox></tm-groupcheckbox>
|
||
*
|
||
*/
|
||
export default {
|
||
name:'tm-groupcheckbox',
|
||
props:{
|
||
// 最大选择数量
|
||
max:{
|
||
type:Number,
|
||
default:9999
|
||
},
|
||
//提交表单时的的字段名称
|
||
name:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
customClass:{
|
||
type:String,
|
||
default:''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$nextTick(function(){
|
||
|
||
this.$emit('change',this.getVal())
|
||
})
|
||
},
|
||
methods: {
|
||
change(e) {
|
||
|
||
this.$emit('change',e)
|
||
},
|
||
|
||
// 获取选中的结果 。
|
||
getVal(){
|
||
let box = [];
|
||
function findchild(p,index){
|
||
let preat = p;
|
||
if(preat.$options?.name==='tm-checkbox'){
|
||
|
||
if(preat.changValue){
|
||
box.push({index:index,value:preat.name,checked:preat.changValue})
|
||
}
|
||
}else{
|
||
if(preat.$children.length>0){
|
||
preat.$children.forEach(item=>{
|
||
findchild(item,index++);
|
||
})
|
||
}
|
||
}
|
||
};
|
||
findchild(this,0);
|
||
return box;
|
||
},
|
||
// 反选。如果一个都没选择。反选就相当于全选。如果是全选，则结果是全部不选。
|
||
// 执行完毕后。不能立即使用getVal获取结果需要this.$nextTick
|
||
reverseVal(){
|
||
function findchild(p,index){
|
||
let preat = p;
|
||
if(preat.$options?.name==='tm-checkbox'){
|
||
|
||
preat.changValue = !preat.changValue;
|
||
}else{
|
||
if(preat.$children.length>0){
|
||
preat.$children.forEach(item=>{
|
||
findchild(item,index++);
|
||
})
|
||
}
|
||
}
|
||
};
|
||
findchild(this,0);
|
||
|
||
},
|
||
// 清除选中。
|
||
clear(){
|
||
function findchild(p,index){
|
||
let preat = p;
|
||
if(preat.$options?.name==='tm-checkbox'){
|
||
|
||
preat.changValue = false;
|
||
}else{
|
||
if(preat.$children.length>0){
|
||
preat.$children.forEach(item=>{
|
||
findchild(item,index++);
|
||
})
|
||
}
|
||
}
|
||
};
|
||
findchild(this,0);
|
||
},
|
||
// 只有当超过最选选项时才会发出错误。
|
||
error(){
|
||
uni.showToast({
|
||
title:"超过选择限制",icon:'none'
|
||
})
|
||
this.$emit('error',"超过选择限制")
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
</style>
|