mpvue中自定义多选框（实现多选的下拉列表功能）

       最近使用mpvue框架在做微信小程序项目中遇到了一个问题，怎么实现多选的下垃列表，原生微信小程序中的picker是不支持多选，所有封装不了，配合mpvue框架使用的uni-app框架以及Dclod插件市场也找了个遍，发现element ui中是有的，然而小程序中竟然没有，个人感觉这种需求并不偏，很常用的功能吧，不过相信业界的大神迟早会做开源的小程序多选下拉列表框。

      

子组件：

<template>
	<div
	 class="modal_mask"
	 v-if="isShow"
	>
		<div class="modal_Box">
			<div class="modal_title">
				<button @tap="tapNoShow">取消</button>
				<p>选择网关</p>
				<button @tap="tapComfirm">确定</button>
			</div>
			<div class="modal_content">
				<scroll-view
				 :scroll-y="isShow"
				 style="height: 100%;"
				>
					<radio-group>
						<label
						 :class="{checkbox: true, checked: item.checked, banColor: flag }"
						 v-for="(item,index) in checkboxArr"
						 @tap.stop="radio2"
						 :id="index"
						 :key="item.name"
						>
							<checkbox
							 :value="item.name"
							 :checked="item.checked"
							 :disabled="(!item.checked) && flag"
							/>{{item.name}}
						</label>
					</radio-group>
				</scroll-view>
			</div>
		</div>
	</div>
</template>
 
<script>
	export default {
		props:["isShow","checkboxArr"],
		data() {
			return {
				checkedInsurance: [],
				flag: false,
			}
		},
		methods: {
			radio2(e) {
				// 最多选择三个（自己可控制多选的个数）
				if (this.checkedInsurance.length == 3) {
					let index = e.mp.target.id; //获取当前点击的下标
					if (this.checkboxArr[index].checked) {
						this.checkboxArr[index].checked = false;
						this.checkedInsurance = [];
						this.checkboxArr.forEach(item => {
							if (item.checked) {
								this.checkedInsurance.push(item);
							}
						});
						this.flag = false;
					} else {
						this.flag = true;
					}
					return;
				}
				let index = e.mp.target.id; //获取当前点击的下标
				this.checkboxArr[index].checked = !this.checkboxArr[index].checked; //改变当前选中的checked值
				this.checkedInsurance = [];
				this.checkboxArr.forEach(item => {
					if (item.checked) {
						this.checkedInsurance.push(item);
					}
				});
				if (this.checkedInsurance.length == 3) {
					this.flag = true;
				}
			},
			// 取消之后传给父组件的值
			tapNoShow() {
				this.isShow = false;
				this.checkboxArr.forEach(item => {
					item.checked = false
				});
				this.checkedInsurance = [];
				this.flag = false;
				this.$emit('getInsurance',this.checkedInsurance, this.isShow);
			},
			// 确定之后传给父组件的值
			tapComfirm() {
				this.isShow = false;
				this.$emit('getInsurance',this.checkedInsurance, this.isShow);
			},
		},
		
		onLoad() {
			console.log(this.isShow);
		}
	};
</script>
 
<style scoped>
	.modal_mask {
		width: 100%;
		height: 65%;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		z-index: 10;
	}
	
	.modal_Box {
		height: 35%;
		width: 100%;
		position: fixed;
		z-index: 999999;
		bottom: 0;
		background-color: #fff;
	}
	
	.modal_title {
		display: flex;
		justify-content: space-between;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #e5e5e5;
		padding: 0 32rpx;
	}
	
	.modal_title button {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #508CEE;
		margin: 0px 0px;
		vertical-align: middle;
		line-height: 50px;
	}
	
	.modal_title p {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333333;
	}
	
	.modal_content {
		height: 600px;
		padding: 0 10rpx 0 30rpx;
	}
	
	.color {
		color: red;
	}
	
	.wrap {
		width: 550px;
		margin: 50rpx auto;
	}
	
	.checkbox-con {
		margin-top: 40rpx;
		text-align: center
	}
	
	.checkbox {
		width: 216rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-family: PingFangSC-Regular;
		font-size: 26rpx;
		color: #666666;
		text-align: center;
		display: inline-block;
		position: relative;
		z-index: 9999;
		background-color: #f9f9f9;
		margin-right: 20rpx;
		margin-bottom: 26rpx;
	}
	
	.checkbox:first-of-type {
		margin-top: 40rpx;
	}
	
	.checkbox:last-of-type {
		margin-bottom: 40rpx;
	}
	
	.checked {
		color: #508CEE !important;
		background: #F2F7FF;
	}
	
	.banColor {
		color: #b4b4b4;
	}
	
	.checkbox checkbox {
		display: none
	}
</style>

父组件：

<template>
	<div>
	    <div class="insuranceDivision padding0_30">
	      <div class="titleBox displayFlex">
	        <div class="title_left">网关</div>
	        <div class="title_right displayFlex" @tap="insuranceDialog">
	          <div class="rightInsurance">{{divisionStr}}</div>
	          <div class="rightIcon iconfont"></div>
	        </div>
	      </div>
	    </div>
	    <customCheckBox :isShow="isShow" :checkboxArr="checkboxArr" @getInsurance = "getInsurance"></customCheckBox>
	  </div>
</template>
 
<script>
	import customCheckBox  from '../../component/index.vue'
	export default {
		data() {
			return {
				divisionStr: "请选择", // 存储保司的字符串
				divisionInsurance: [], // 存储保司的数组
				isShow: false,
				checkboxArr: [{
					name: '选项A',
					checked: false
				}, {
					name: '选项B',
					checked: false
				}, {
					name: '选项C',
					checked: false
				}, {
					name: '选项D',
					checked: false
				}, {
					name: '选项E',
					checked: false
				}, {
					name: '选项F',
					checked: false
				}, {
					name: '选项G',
					checked: false
				}, {
					name: '选项H',
					checked: false
				}, {
					name: '选项I',
					checked: false
				}, {
					name: '选项J',
					checked: false
				}, {
					name: '选项K',
					checked: false
				}, {
					name: '选项M',
					checked: false
				}, {
					name: '选项N',
					checked: false
				}, {
					name: '选项O',
					checked: false
				}, {
					name: '选项P',
					checked: false
				}, {
					name: '选项Q',
					checked: false
				}, {
					name: '选项R',
					checked: false
				}, {
					name: '选项S',
					checked: false
				}, {
					name: '选项T',
					checked: false
				}, {
					name: '选项U',
					checked: false
				}, {
					name: '选项V',
					checked: false
				}, {
					name: '选项W',
					checked: false
				}, {
					name: '选项X',
					checked: false
				}, {
					name: '选项Y',
					checked: false
				}, {
					name: '选项Z',
					checked: false
				}],
			}
		},
 
		components: {
			customCheckBox 
		},
 
		methods: {
			// 处理子组件传过来的值
			getInsurance(divisionsurance, isShow) {
				if (divisionsurance.length != 0) {
					this.divisionInsurance = divisionsurance;
					this.divisionStr = '';
					this.divisionInsurance.forEach(item => {
						this.divisionStr += item.name + ' ';
					})
				} else {
					this.divisionStr = '请选择';
				}
				this.isShow = isShow;
			},
			insuranceDialog() {
				this.isShow = true;
				// console.log(this.isShow)
			}
		}
	};
</script>
 
<style src="../authorize/authorize.css"></style>

效果如下：

其实只要前端就应该先把功能实现了在细调整样式问题，希你用到的刚好能找到。

最后送给大家一句话：别人是别人，我是我

 

 

---------------------
作者：尔嵘
来源：CSDN
原文：https://blog.csdn.net/XU441520/article/details/100974997?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件