hqs-popup弹窗实现多选（uni-app）

前言

移动端的下拉多选组件找了半个世纪也没见着，当我正准备着手自己写一个时，发现了dcloud插件市场的hqs-popup这一款弹窗插件。当然，该插件的界面简介舒服，也是为什么会选择它的一个重要原因。

简介

基于uni-popup实现，增加了手势滑动关闭弹窗功能，体验和抖音评论下滑关闭类似。功能如下：

• 可手动调整弹窗大小，并滑动关闭弹窗。也可关闭手动操作
• 可根据自己实际需要调整弹出方向
• 根据自己需要可自己设置点击遮罩层是否关闭弹窗

 使用方法

1、点击进入官方插件市场点击导入插件。

2、页面

<!-- 岗位 -->
<list-cell label="岗位" :showBorder="true" :required="true">
		<list-cell-right style="padding-left: 350rpx;" :label="item1.job_name" @rightClick="showPopupFrom('bottom', 'job')"></list-cell-right>
</list-cell>

<hqs-popup v-model="showPopJob" title="选择岗位" :from="popFromJob" :mask-click="maskClick" @sure="onSureJob()">
	<view>
		<view :class="{checked: item.checked}" class="list-item" v-for="(item, i) in allJobList" :key="i"
			@click="selectFun(item, i)">
			<text>{{ item.name }}</text>
		</view>
	</view>
</hqs-popup>

3、js方法

// 点击确定选择 岗位
onSureJob() {
	console.log('点击确定选择岗位');
    // 做数据处理
	let nameString = []
	let ids = this.allJobList.filter((val)=>{
		if(val.checked){
			nameString.push(val.name)
			return val
		}
	})
	this.$forceUpdate()
},
// 点击打开多选弹窗
showPopupFrom(from, ele) {
	this.popFromJob = from
	this.showPopJob = true
},
// 角色选中
selectFun(item, index) {
	item.checked = !item.checked
}

4、data数据定义

data(){
    return {
		showPopJob: false,
		popFromJob: 'bottom',
        // 设置点击遮罩层可关闭
		maskClick: true，
        // 模拟列表数据
		allJobList: [{
                id：1，
                name: "工人"
            },{
                id：2，
                name: "农民"
            },{
                id：3，
                name: "老板"
            },{
                id：4，
                name: "法人"
            },{
                id：5，
                name: "搬砖"
            },
        ],
    }
}

5、点击选中时的背景

.checked {
	background-color: #ececec;
}

最终实现效果

如想获取完美视觉体验，请点击下方视屏链接查看最终演示效果

https://live.youkuaiyun.com/v/288504?spm=1001.2014.3001.5501

注： 本文展示最后展示的效果图，在使用时有部分修改和调整，如有需要可私信本文作者（备注来源）