小程序app封装公用顶部筛选区uv-drop-down

ops/2024/12/26 10:59:24/

参考ui:DropDown 下拉筛选 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架

样式示例：

封装公用文件代码  dropDownTemplete

<template><!-- 顶部下拉筛选区封装公用组件 --><view><uv-drop-down ref="dropDown" sign="dropDown_1" :defaultValue="defaultValue" @click="selectMenu"><uv-drop-down-item v-for="(item,index) in uvDropDownItem" :name="item.name" type="2":label="dropItem(item.name,index).label" :value="dropItem(item.name,index).value"></uv-drop-down-item><uv-drop-down-item name="more" type="1" label='更多' extra-icon='empty-search' :value="0"></uv-drop-down-item></uv-drop-down><uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"@clickItem="clickItem"></uv-drop-down-popup><!-- 更多搜索 --><view class="popupPosition"><uv-popup ref="popup" :safeAreaInsetTop="true"><view class="content"><view style="padding: 20rpx;"><uv-form labelPosition="left" :model="filterSheetData" ref="form"><uv-form-item v-for="(item,index) in formItem" :label="item.label" :prop="item.vModel"labelWidth="120" borderBottom width="150rpx" @click="handleItemClick(item)"><uv-input v-model="filterSheetData[item.vModel]" disabled disabledColor="#ffffff":placeholder="item.placeholder" border="none"></uv-input><uv-icon v-if="item.selectIcon" name="arrow-right"style="float: right;margin-right: 20rpx;"></uv-icon></uv-form-item><uv-button type="primary" text="搜索" customStyle="margin-top: 10px"@click="searchSheet"></uv-button><uv-button type="error" text="重置" customStyle="margin-top: 10px"@click="resetSearchSheet"></uv-button></uv-form></view></view></uv-popup><uv-popup ref="calendarsPopup" mode="bottom"><view class="calendarPopupStyle"><view class="cancel" @click="calendarsCancel">取消</view><view class="confirm" @click="calendarsConfirm">确定</view></view><uv-calendars ref="calendars" insert mode="range" @confirm="(e)=>timeConfirm(e,calendarsType)"@change="(e)=>timeConfirm(e,calendarsType)" /></uv-popup><uv-picker v-if="pickerShow" ref="picker" :columns="pickerColumns" keyName="label"@confirm="(e)=>pickerConfirm(e,pickerType)" @close="pickerClose"></uv-picker><uv-input v-if="pickerInputShow" placeholder="请输入筛选内容" border="surround" clearable v-model="pickerValue"@change="pickerSearchChange" @clear="pickerSearchClear" :customStyle="pickerIptStyle"></uv-input></view></view></view>
</template><script>export default {data() {return {// 表示value等于这些值，就属于默认值defaultValue: [0, 'all', '0'],result: [],activeName: '',pickerType: "",pickerShow: false,pickerInputShow: false,pickerIptStyle: {position: 'fixed',bottom: '220px',transform: 'translate(-50%)',zIndex: 997},pickerColumns: [[{label: '数据加载失败',id: 0}]],queryParams: {json: {conditions: [],formId: '',orderBys: [],}},pickerValue: ''}},props: {// 下拉选项数据uvDropDownItem: {type: Array,default: () => ([])},// 更多下拉选中表单数据filterSheetData: {type: Object,default: () => ({})},filternetworkData: {type: Object,default: () => ({})},filterinitialData: {type: Object,default: () => ({})},// 表单项字段formItem: {type: Array,default: () => ([])},// 更多筛选中下拉数据列表olumnscData: {type: Array,default: () => ([])},},computed: {dropItem(name, index) {return (name, index) => {const result = {};const find = this.result.find(item => item.name === name);if (find) {result.label = find.label;result.value = find.value;} else {result.label = this.uvDropDownItem[index][name].label;result.value = this.uvDropDownItem[index][name].value;}return result;}},// 获取当前下拉筛选项currentDropItem() {let data = this.uvDropDownItem.find(item => item.name === this.activeName)// console.log(data&&data.name);//拿到name字段// console.log(data&&data[data.name]);//获取name字段中的数组return data && data[data.name]}},created() {},methods: {// 更多筛选中表单点击事件handleItemClick(item) {if (item.selectIcon) {if (item.type === 'text') {this.chooseSearchSelect(item.vModel);} else if (item.type === 'time') {this.chooseSearchTime(item.vModel);}}},// 选择内容（下拉选）chooseSearchSelect(type) {this.pickerType = typethis.pickerColumnsAssignment()this.pickerShow = truethis.$nextTick(() => {this.$refs.picker.open();})setTimeout(() => {this.pickerIptStyle['left'] = window.innerWidth / 2 + 'px'this.pickerInputShow = true}, 300)},pickerColumnsAssignment() {this.olumnscData.forEach(item => {if (item.name == this.pickerType) {this.$set(this.pickerColumns, 0, item.list)}})},// 快速过滤选择项pickerSearchChange(e) {if (e === '') {this.pickerColumnsAssignment()} else {this.olumnscData.forEach(item => {if (item.name == this.pickerType) {this.$set(this.pickerColumns, 0, item.list.filter((item) => item.label.includes(e)))}})}},// 快速过滤选择项清除pickerSearchClear() {this.pickerColumnsAssignment()},// 选择项确定pickerConfirm(e, type) {this.filternetworkData[type] = e.value[0]this.filterSheetData[type] = e.value[0].label},// 选择项取消pickerClose() {this.pickerShow = falsethis.pickerInputShow = false},// 选择时间chooseSearchTime(type) {this.calendarsType = typethis.$refs.calendarsPopup.open();},// 选择时间取消calendarsCancel() {this.filternetworkData[this.calendarsType] = ""this.filterSheetData[this.calendarsType] = ""this.$refs.calendarsPopup.close();},// 选择时间确定calendarsConfirm() {this.$refs.calendarsPopup.close();},timeConfirm(e, type) {this.filternetworkData[type] = e.rangethis.filterSheetData[type] = e.range.before + ' / ' + e.range.after},//更多--搜索searchSheet() {this.queryParams.json.conditions = []this.formItem.forEach(item => {// 判断查询表单项是否有值if (this.filternetworkData[item.vModel]&&item.type=='text') {// 如果value有值说明是对象格式  将value值传递if (this.filternetworkData[item.vModel].value) {this.queryParams.json.conditions.push({field: item.vModel,operation: "like",value: this.filternetworkData[item.vModel].value})// 如果只是字段有值 说明是文本框} else {this.queryParams.json.conditions.push({field: item.vModel,operation: "like",value: this.filternetworkData[item.vModel]})}}if (this.filternetworkData[item.vModel]&&item.type=='time') {this.queryParams.json.conditions.push({field: item.vModel,operation: "<>",value: this.filternetworkData[item.vModel].before,value2: this.filternetworkData[item.vModel].after})}})this.$refs.popup.close()// 将查询条件传递给父组件this.$emit('searchSheet', this.queryParams.json)},resetSearchSheet() {this.$emit('resetSearchSheet')this.queryParams.json.conditions = []this.$refs.popup.close()},/*** 点击每个筛选项回调* @param {Object} e { name, active, type } = e*/selectMenu(e) {const {name,active,type} = e;this.activeName = name;// type 等于1 的需要特殊处理：type不等于1可以忽略if (type == 1) {this.$refs.popup.open('top');} else {// 找到 name 属性等于 this.activeName 的对象const dropDownItem = this.uvDropDownItem.find(item => item.name === this.activeName);if (dropDownItem) {const find = this.result.find(item => item.name == this.activeName);if (find) {const findIndex = dropDownItem.child.findIndex(item => item.label == find.label && item.value == find.value);dropDownItem.activeIndex = findIndex;} else {dropDownItem.activeIndex = 0;}}}},/*** 点击菜单回调处理* @param {Object} item 选中项 { label,value } = e*/clickItem(e) {// 下面有重新赋值，所以用letlet {label,value} = e;const findIndex = this.result.findIndex(item => item.name == this.activeName);if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {label = this[this.activeName].label;}// 已经存在筛选项if (findIndex > -1) {this.$set(this.result, findIndex, {name: this.activeName,label,value})} else {this.result.push({name: this.activeName,label,value});}this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);this.result.forEach(item => {if (item.name) {if (item.label == '全部') {if (this.queryParams.json.conditions.length) {this.queryParams.json.conditions.forEach((itens,indexs)=>{if(itens.field === item.name){this.queryParams.json.conditions.splice(indexs,1)}})	}} else {// 添加筛选参数if (this.queryParams.json.conditions.length) {this.queryParams.json.conditions.forEach((itens,indexs)=>{if(itens.field === item.name){this.queryParams.json.conditions.splice(indexs,1)}})this.queryParams.json.conditions.push({field: item.name,operation: "=",value: item.value})} else {this.queryParams.json.conditions.push({field: item.name,operation: "=",value: item.value})}}}})
// 将查询条件传递给父组件this.$emit('searchSheet', this.queryParams.json)},}}
</script><style lang="scss" scoped>// 下拉选项滚动区域::v-deep .uv-dp__container {height: 400rpx !important;overflow-y: auto;}uni-view[data-v-4cc3c370] {top: 0 !important;}.calendarPopupStyle {display: flex;justify-content: space-between;border-bottom: 1rpx solid #ccc;>view {font-size: 34rpx;color: #909399;padding: 20rpx 20rpx;}}
</style>

父组件调用：

<view class="header-fixed"><dropDownTemplete :uvDropDownItem="uvDropDownItem" :filterSheetData="filterSheetData" :filternetworkData="filternetworkData" :filterinitialData="filterinitialData" :formItem="formItem" :olumnscData="olumnscData" @searchSheet="searchSheet" @resetSearchSheet="resetSearchSheet"></dropDownTemplete></view>

data数据：

// 下拉选项数据uvDropDownItem: [{name: 'brand',brand: {label: '品牌',value: 'all',activeIndex: 0,color: '#333',activeColor: '#2878ff',child: [{label: '全部',value: 'allto'}]},},{name: 'categoryId',categoryId: {label: '品类',value: 'all',activeIndex: 0,color: '#333',activeColor: '#2878ff',child: [{label: '全部',value: 'allto'}]}}],// 更多下拉选项数据formItem:[{label:'品类',vModel:'categoryId',type:'text',placeholder:'请选择品类',selectIcon:true},{label:'品牌',vModel:'brand',type:'text',placeholder:'请选择品牌',selectIcon:true},{label:'更新时间',vModel:'updateTime',type:'time',placeholder:'请选择更新时间',selectIcon:true},{label:'创建时间',vModel:'createTime',type:'time',placeholder:'请选择创建时间',selectIcon:true}],filterSheetData: {categoryId: "",brand: "",updateTime: "",createTime: ""},filternetworkData: {categoryId: "",brand: "",updateTime: "",createTime: ""},filterinitialData: {categoryId: "",brand: "",updateTime: "",createTime: ""},olumnscData:[{name:'categoryId',list:[{label:'1',vaule:'fff'},{label:'2',vaule:'dfvdgf'}],},{name:'brand',list:[{label:'里奈',vaule:'里奈'},{label:'舞曲',vaule:'舞曲'}],}]

搜索和清除事件：

// 更多-搜索searchSheet(data){console.log(data);//这里可进行搜索操作},// 更多-清除resetSearchSheet(){// 清空数据this.filterSheetData = this.filterinitialDatathis.filternetworkData = {categoryId: {label:'',value:''},brand: {label:'',value:''},updateTime: "",createTime: ""}},

最终样式图示例：


http://www.ppmy.cn/ops/144783.html

相关文章

CV-OCR经典论文解读|An Empirical Study of Scaling Law for OCR/OCR 缩放定律的实证研究

CV-OCR经典论文解读|An Empirical Study of Scaling Law for OCR/OCR 缩放定律的实证研究

论文标题 An Empirical Study of Scaling Law for OCR OCR 缩放定律的实证研究 论文链接&#xff1a; An Empirical Study of Scaling Law for OCR论文下载 论文作者 Miao Rang, Zhenni Bi, Chuanjian Liu, Yunhe Wang, Kai Han 内容简介 本论文在光学字符识别&#xf…
阅读更多...
python Redis 操作工具类封装

python Redis 操作工具类封装

在 Python 中封装 Redis 操作工具类&#xff0c;可以方便地在应用程序中复用 Redis 操作&#xff0c;简化 Redis 操作的复杂度&#xff0c;并提供统一的接口。这里给出一个基本的 Redis 操作工具类封装&#xff0c;使用 redis-py 库&#xff0c;这个库是 Python 与 Redis 交互的…
阅读更多...
Python 爱心代码实现动态爱心图案展示

Python 爱心代码实现动态爱心图案展示

引言 在 Python 中&#xff0c;我们可以利用 tkinter 库来创建有趣的图形界面&#xff0c;本文将为大家分享一段使用 tkinter 库绘制动态爱心图案的代码&#xff0c;并详细介绍其实现逻辑与运行方法。 一、代码功能概述 这段 Python 代码借助 tkinter 库创建了一个窗口&…
阅读更多...
【华为OD-E卷-开心消消乐 100分（python、java、c++、js、c）】

【华为OD-E卷-开心消消乐 100分（python、java、c++、js、c）】

【华为OD-E卷-开心消消乐 100分&#xff08;python、java、c、js、c&#xff09;】 题目 给定一个 N 行 M 列的二维矩阵&#xff0c;矩阵中每个位置的数字取值为 0 或 1。矩阵示例如&#xff1a; 1 1 0 0 0 0 0 1 0 0 1 1 1 1 1 1 现需要将矩阵中所有的 1 进行反转为 0&#…
阅读更多...
Meta如何用极致技术实现接近完美的缓存一致性？

Meta如何用极致技术实现接近完美的缓存一致性？

0 导言 缓存是一种强大的技术&#xff0c;广泛应用于计算机系统的各个方面&#xff0c;从缓存等硬件到操作系统、网络浏览器&#xff0c;尤其是后端开发。对于 Meta 这样的公司来说&#xff0c;缓存是非常重要的&#xff0c;因为它可以帮助他们减少延迟、扩展繁重的工作负载并…
阅读更多...
[创业之路-204]：《华为战略管理法-DSTE实战体系》- 5-平衡记分卡绩效管理

[创业之路-204]：《华为战略管理法-DSTE实战体系》- 5-平衡记分卡绩效管理

目录 一、平衡计分卡概述 1、平衡计分卡的基本概念 2、平衡计分卡的发展阶段 3、平衡计分卡在华为的应用 4、平衡计分卡的优缺点 五、财务&#xff08;股东&#xff09;、顾客&#xff08;用户&#xff09;、内部运营&#xff08;内部&#xff09;及学习与发展&#xff0…
阅读更多...
打造高效租赁小程序让交易更便捷

打造高效租赁小程序让交易更便捷

内容概要 在如今节奏飞快的商业世界里&#xff0c;租赁小程序如同一只聪明的小狐狸&#xff0c;迅速突围而出&#xff0c;成为商家与消费者之间的桥梁。它不仅简化了交易流程&#xff0c;还在某种程度上将传统租赁模式带入了互联网时代。越来越多的企业意识到&#xff0c;这种…
阅读更多...
玩转OCR | 探索腾讯云智能结构化识别新境界

玩转OCR | 探索腾讯云智能结构化识别新境界

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ 玩转OCR 腾讯云智能结构化识别产品介绍服务应用产品特征行业案例总结 腾讯云智能结构化识别 腾讯云智能结构化OCR产品分为基础版与高级版&am…
阅读更多...
最新文章

Copyright @ 2022~2023