这是我参与更文挑战的第10天，活动详情查看：更文挑战
插件背景：主要是做多选，默认插入一个全选 原插件地址：ext.dcloud.net.cn/plugin?id=7…
调用：
// 初始化
this.$refs.checkboxClass.set({
type:'checkbox',// 类型：多选框
column:2, // 分列
list: [{
text: '1',
id: '1',
checked: false
},{
text: '2',
id: '2',
checked: false
}],
});
// 设置全选
this.$refs.checkboxClass.checkAll()
效果：
<!-- 该插件修改过 -->
<template>
<view class="helang-checkbox" :class="column">
<view v-for="(v,i) in list" :key="i" >
<view
class="item"
:class="{
'active':(type=='radio' && index == i) || (type=='checkbox' && v.checked),
'disabled':isDisabled
}"
:data-i="i"
:data-id="v.id"
@tap="change"
>{{v.text}}</view>
</view>
</view>
</template>
<script>
export default {
props:{
// 标识名，用于多个组件时区分回调组件
keyName:{
type: Number | String,
default: ''
},
},
data() {
return {
list:[],
getList: [], // 存储一份原始值
index:-1,
type:'checkbox',
column:'',
isDisabled:false,
copyListData:'',
copyIndexData:-1,
};
},
mounted() {
},
methods: {
/* 切换 */
change(e){
if(this.disabled()){
return;
}
let i = Number(e.currentTarget.dataset.i);
let id = e.currentTarget.dataset.id;
/* 单选框 */
if(this.type=='radio'){
this.index = i;
this.$nextTick(()=>{
this.$emit("change",this.get(),this.$props.keyName);
})
return;
}
/* 复选框 */
if(this.list[i].checked){
this.$set(this.list[i],"checked",false);
if(id === 'all') {
this.list.forEach((item,idx) => {
this.$set(this.list[idx],"checked",false);
})
} else {
this.checkisAll()
}
}else{
if(this.maxSize){
let pickerSize = 0;
this.list.forEach((item,index)=>{
if(item.checked){
pickerSize++;
}
});
// 当已选值数量 >= 允许的最大选择值时触发
if(pickerSize >= this.maxSize){
this.maxFn && this.maxFn();
return;
}
}
this.$set(this.list[i],"checked",true);
if(id === 'all') {
this.list.forEach((item,idx) => {
this.$set(this.list[idx],"checked",true);
})
} else {
this.checkisAll()
}
}
this.$nextTick(()=>{
this.$emit("change",this.get(),this.$props.keyName);
});
},
checkisAll() {
let arr = this.get();
if (arr.length !== this.getList.length) {
this.$set(this.list[0],"checked",false);
} else {
this.$set(this.list[0],"checked",true);
}
},
/* 设置值 */
set(data) {
let [type,index] = ['checkbox',-1];
let column = ['','col_1','col_2','col_3'];
if(data.type == 'radio'){
type = 'radio';
index = data.index >= 0 ? data.index : -1;
}
this.column = (data.column in column) ? column[data.column] : '';
this.type = type;
this.index = index;
this.list = data.list;
this.getList = this.copyDeep(data.list);
if(data.maxSize > 0 && data.maxFn){
this.maxSize = data.maxSize;
this.maxFn = data.maxFn;
}else{
this.maxSize = undefined;
this.maxFn = undefined;
}
if (type === 'checkbox') {
this.list.unshift({
text: '全部',
id: 'all',
check: false
})
}
// 存储数据
this.copyListData = JSON.stringify(data.list);
this.copyIndexData = data.index === undefined ? -1 : data.index;
},
/* 获取值 */
get(){
/* 单选框 */
if(this.type=='radio'){
if(this.index >= 0){
return this.list[this.index];
}else{
return null;
}
}
let arr=[];
this.list.forEach((item,index)=>{
if(item.checked == true && item.id !== 'all'){
arr.push(item);
}
});
return arr;
},
/* 全部选中 */
checkAll(){
if(this.disabled()){
return;
}
if(this.type=='radio'){
return null;
}
this.list.forEach((item,index)=>{
this.$set(this.list[index],"checked",true);
})
this.$nextTick(()=>{
this.$emit("change",this.get(),this.$props.keyName);
});
},
/* 取消全部选中 */
cancelAll(){
if(this.disabled()){
return;
}
if(this.type=='radio'){
this.index = -1;
return null;
}
this.list.forEach((item,index)=>{
this.$set(this.list[index],"checked",false);
})
this.$nextTick(()=>{
this.$emit("change",this.get(),this.$props.keyName);
});
},
/* 反选全部 */
invertAll(){
if(this.disabled()){
return;
}
if(this.type=='radio'){
this.index = -1;
return null;
}
this.list.forEach((item,index)=>{
this.$set(this.list[index],"checked",item.checked ? false : true);
})
},
/* 重置 */
reset(){
this.list = JSON.parse(this.copyListData);
this.index = this.copyIndexData;
},
/* 禁用 */
disabled(flag = undefined){
if(flag === undefined){
return this.isDisabled;
}
this.isDisabled = flag;
},
copyDeep(origin) {
if (origin instanceof Object) {
if (isArray(origin)) {
var targetArr = []
for (var i = 0; i < origin.length; i++) {
targetArr.push(this.copyDeep(origin[i]))
}
return targetArr
} else {
var targetObj = {}
for (var item in origin) {
targetObj[item] = this.copyDeep(origin[item])
}
return targetObj
}
} else {
return origin
}
function isArray (value) {
return !!value && value instanceof Array
}
}
}
}
</script>
<style lang="scss" scoped>
.helang-checkbox{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
margin-right: -20rpx;
font-size: 28rpx;
text-align: center;
&>view{
margin-bottom: 20rpx;
padding-right: 20rpx;
box-sizing: border-box;
}
&.col_1{
&>view{
width: 100%;
}
}
&.col_2{
&>view{
width: 50%;
}
}
&.col_3{
&>view{
width: 33.3333333%;
}
}
.item{
line-height: 50rpx;
padding: 0 20rpx;
box-sizing: border-box;
border: #e5e5e5 solid 1px;
background-color: #fff;
color: #333;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// 未选中状态下的禁用样式
&.disabled{
background-color: #f1f1f1;
color: #d8d8d8;
}
&.active{
background-color: #f5fff9;
color: #42b983;
border: #42b983 solid 1px;
&::before{
content: '';
display:block;
width: 20px;
height: 20px;
background-color: #42b983;
position: absolute;
right: -1px;
bottom: -1px;
z-index: 1;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
&::after{
content: '';
display:block;
width: 3px;
height: 6px;
border-right: #fff solid 2px;
border-bottom: #fff solid 2px;
transform:rotate(25deg);
position: absolute;
right: 3px;
bottom: 3px;
z-index: 2;
}
// 选中状态下的禁用样式
&.disabled{
background-color: #f1f1f1;
color: #d8d8d8;
border: #e5e5e5 solid 1px;
&::before{
background-color: #d9d9d9;
}
}
}
}
}
</style>
