移动端基于Vant组件封装底部弹出搜索多选列表

移动端基于Vant组件封装底部弹出搜索多选列表：
效果图如下：

点击确定后赋值给表单

使用到的组件：van-popup，van-search

组件页面代码：searchDataPopup.vue

<template><van-popup class="search-data-popup" v-model="show" position="bottom" :lazy-render="false"><div class="header-line"><div class="cancel" @click="onSearchCancel">取消</div><div class="title">{{ title }}</div><div class="sure" @click="onSearchConfirm">确定</div></div><van-search placeholder="输入您想搜索的内容" v-model="searchValue" @input="inputSearchValue" /><div class="tip">已选{{temp_datas.length}}条</div><div class="lists"><div class="line" v-for="(item, index) in options" @click="checkedLine(item)"><div class="name">{{ item.username }}</div><img src="@/assets/img/organize-tick-icon.png" v-if="getArrayColumn(temp_datas, 'gpid').indexOf(item.gpid) !== -1" /></div></div></van-popup>
</template>
<script>
export default {name: "searchDataPopup",props: {showPicker: Boolean, //是否显示datas: Array, //未根据搜索内容筛选的所有列表数据defaultDatas: Array, //默认选中数据title: String //标题},data(){return {searchValue: "", //搜索框内容options: [], //根据搜索内容筛选出来的列表数据temp_datas: [] //选中的列表数据，通过确定按钮传给父组件}},computed: {show: {get() {return this.showPicker;},set() {this.$emit("cancel");},},},mounted(){this.temp_datas = JSON.parse(JSON.stringify(this.defaultDatas));this.searchValue = "";this.options = [];},methods: {inputSearchValue(query) {//搜索框值发生改变if (query !== '') {setTimeout(() => {this.options = this.datas.filter(item => {return item.username.indexOf(query.toLowerCase()) > -1;});}, 200);} else {this.options = [];}},checkedLine(item) {//选中行if(this.getArrayColumn(this.temp_datas, 'gpid').indexOf(item.gpid) !== -1) {//已经选中此行数据，再次点击则取消选中this.temp_datas = this.temp_datas.filter(row => {return row.gpid !== item.gpid;});} else {//未选中此行数据，添加this.temp_datas.push(item);}},onSearchCancel() {//取消this.$emit("cancel");},onSearchConfirm() {//确认this.$emit("confirm", this.temp_datas);},getArrayColumn(arr, column){//获取二维数组指定元素的一维数组var temp = [];for(let i = 0; i < arr.length; i++) {temp.push(arr[i][column]);}return temp;}}
}
</script>
<style scoped>
.search-data-popup .tip {color: #666;padding-bottom: 5px;
}
.search-data-popup .header-line {display: flex;justify-content: space-between;align-items: center;height: 44px;
}
.search-data-popup .header-line .cancel {padding: 0 16px;font-size: 14px;color: #969799;
}
.search-data-popup .header-line .title {font-weight: 500;font-size: 16px;color: #343434;
}
.search-data-popup .header-line .sure {padding: 0 16px;font-size: 14px;color: #576b95;
}
.search-data-popup .lists {display: flex;flex-direction: column;padding: 10px 12px 20px 12px;height: 200px;overflow: auto;
}
.search-data-popup .lists .line {line-height: 40px;font-size: 16px;color: #000;display: flex;justify-content: space-between;align-items: center;
}
.search-data-popup .lists .line img {width: 20px;height: 20px;
}
</style>

父页面引入方式如下

<!-- 我的个人信息 -->
<template><div class="my-info"><van-form ref="ruleForm"><van-fieldreadonlyclickableautosizerows="1"type="textarea"name="selectData":value="getArrayColumn(ruleForm.selectData, 'username').join(',')"label="选择列表"@click="showDataPopup"/><searchDataPopup v-if="showDataPicker" :showPicker="showDataPicker" title="请选择用户" :datas="dataList" :defaultDatas="ruleForm.selectData" @confirm="onDataPickerConfirm" @cancel="showDataPicker = false"></searchDataPopup></van-form></div>
</template>
<script>
import searchDataPopup from '@/components/searchDataPopup'
export default {name: "MyProfile",components: { searchDataPopup },data() {return {ruleForm: {selectData: []},showDataPicker: false,dataList: []};},created() {//获取用户列表this.getUserOptions();},methods: {onDataPickerConfirm(data) {//点击确定this.ruleForm.selectData = data;this.showDataPicker = false;},showDataPopup() {//显示Pickerthis.showDataPicker = true;},getUserOptions() {//获取用户列表axios('/xxxx', "get", {}).then((response) => {this.dataList = response;}).catch((error) => {});},getArrayColumn(arr, column){//获取二维数组指定元素的一维数组var temp = [];for(let i = 0; i < arr.length; i++) {temp.push(arr[i][column]);}return temp;}}
};
</script>

这样就大功告成了！

移动端基于Vant组件封装底部弹出搜索多选列表相关推荐

【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
uni-app 封装底部弹出框
一个很简单的代替 select 的组件: 这里只实现了弹出.确认时返回选中的选中的对象: 没有实现弹出时显示为第几个,有需要可以自己加: 位置.弹出动画.样式都可以根据自己的需要进行修改: 有问题或者 ...
微信小程序组件 - 中间底部弹出输入弹框
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码一. jh-input-alert 中间输入弹框,可设置最大输入长度,单行多行显示单行 ...
layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
Android仿IOS封装通用的弹出框Dialog和底部弹出列表选择框仿美团顶部条件筛选框附自定义ViewGroup
弹出框背景提示与询问弹出框实现使用列表选择框实现使用顶部条件筛选框实现自定义ViewGroup 使用总结背景鉴于Android提供的默认弹出框很一般,IOS的弹出框样式还不错 ...
flutter实现底部弹出框以及特色功能
今天项目中要实现底部弹出框并且实现圆角功能,先来预览一下可以看出实现的公告有底部圆角,以及朋友圈,微信转发等实现逻辑我直接代码列出定义 List<String> nameItems ...
个人中心 (二) 01-编辑资料-基础布局-Popup弹出层-底部弹出-头像男女时间 DatetimePicker时间选择转换-dayjs(value).format('YYYY-MM-DD')
个人中心-编辑资料-基础布局-Popup 弹出层-底部弹出模式-头像-男女-时间 & DatetimePicker 时间选择-年月日模式 & dayjs(value) 转换成日期对象, ...
Android——完全自定义底部弹出支付页面
近期博主在网上随便搜了一番,发现很多实现底部弹出支付页面的大多数都用的,自定义PopupWindow 去实现的,里面复杂的逻辑看得我不想看,很多对自定义不熟悉伙伴们,看到自定义这三个字就有种血脉 ...
android 底部弹窗失效,Android实现从底部弹出Dialog(和PopWindow实现的效果同样)
布局文件:dialog_custom_layout.xmlandroid android:orientation="vertical" android:layout_width=& ...

移动端基于Vant组件封装底部弹出搜索多选列表

移动端基于Vant组件封装底部弹出搜索多选列表相关推荐

最新文章

热门文章