This is the 10th day of my participation in Gwen Challenge
Plugin background: mainly do multiple selection, the default to insert a full selection
Original plugin address: ext.dcloud.net.cn/plugin?id=7…
Call:
/ / initialization
this.$refs.checkboxClass.set({
type:'checkbox'.// Type: multiple boxes
column:2./ / respectively
list: [{
text: '1'.id: '1'.checked: false}, {text: '2'.id: '2'.checked: false}]});// Select all
this.$refs.checkboxClass.checkAll()
Copy the codeEffect:
<! -- This plugin has been modified --><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: {// Identifies the callback component when there are multiple components
keyName: {type: Number | String.default: ' '}},data() {
return {
list: [].getList: [].// Store a copy of the original value
index: -1.type:'checkbox'.column:' '.isDisabled:false.copyListData:' '.copyIndexData: -1}; },mounted(){},methods: {
Switch / * * /
change(e){
if(this.disabled()){
return;
}
let i = Number(e.currentTarget.dataset.i);
let id = e.currentTarget.dataset.id;
/* Single box */
if(this.type=='radio') {this.index = i;
this.$nextTick(() = >{
this.$emit("change".this.get(),this.$props.keyName);
})
return;
}
/* Check box */
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++; }});Emitted when the number of selected values >= the maximum allowed selected values
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); }},/* Sets the value */
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: 'all'.id: 'all'.check: false})}// Store data
this.copyListData = JSON.stringify(data.list);
this.copyIndexData = data.index === undefined ? -1 : data.index;
},
/* Get the value */
get(){
/* Single box */
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;
},
/* Select */
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);
});
},
/* Deselect all */
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);
});
},
/* Select all */
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 / * * /
reset(){
this.list = JSON.parse(this.copyListData);
this.index = this.copyIndexData;
},
To disable the * / / *
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 && valueinstanceof 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; // Disable styles & in unchecked state.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; } // Disable styles & in selected state.disabled{
background-color: #f1f1f1;
color: #d8d8d8;
border: #e5e5e5 solid 1px;
&::before{
background-color: #d9d9d9;
}
}
}
}
}
</style>
Copy the code