Uniapp plugin Helang -checkbox all anti – selection plugin modified

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 code

Effect:

<! -- 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