Vue - 检索

1、组件 1.1、html 部分

<template> <div class="retrieval_box"> <div>  <div class="retrieval_item_box" :class="justifyContent"> <div class="item_box" @click="openMenu(i)" v-for="(item, i) in getData" :key="i" > <span>{{ item.text }} <div class="show_data" v-if="isMenu">   <div class="show_item" v-for="(item, i) in showData" :key="i" @click="selectRetrieval(item)" > {{ item.text }}  <div class="mask" v-if="isMenu" @click="offMask"> props: { // 检索项数据 getData: { type: Array, default: () => { return []; }, }, // 选择项的数据 showData: { type: Array, default: () => { return []; }, }, }, data() { return { // 预留：选中时文字颜色 blue: 'blue', // 预留：选中时文字颜色 text: '', // 控制是否显示被选项 isMenu: false, // 控制选中的是哪一个检索 iRe: null, // 控制类，改变图片的角度 rotate: '', // 图片 retrievalImg: require('@/common/img/***/retrieval.png'), // 控制对齐方式 justifyContent: null, // 展示的数据变量 showDatas: [], }; }, mounted() { // 检索项对齐方式 if (this.getData.length <= 4) { this.justifyContent = 'jc_center'; } else { this.justifyContent = 'jc_start'; } }, methods: { // 打开下拉菜单 openMenu(i) { this.iRe = i; this.isMenu = true; this.$emit('openR', i); this.rotate = 'rotate'; }, // 选中数据 selectRetrieval(data) { this.iRe = null; this.isMenu = false; this.$emit('implement', data); this.text = data.text; }, // 关闭遮罩层 offMask() { this.isMenu = false; this.iRe = null; }, }, }; 

1.3、Css 部分

.retrieval_box { width: 100%; background-color: #ffffff; } // 检索项（start）
.retrieval_item_box { box-sizing: border-box; display: flex; align-items: center; padding: 4.5px 0; margin: 0 7px; overflow-x: auto; white-space: nowrap; } .item_box { box-sizing: border-box; flex: 1; display: flex; justify-content: center; align-items: center; padding: 4px 4px; margin: 0 8px; cursor: pointer; } .item_box:first-child { margin-left: 0; } .item_box > span { font-size: 14px; color: #323233; } .item_box > img { width: 8px; height: 5px; margin-left: 6px; } // 检索项（end）

// 展示菜单数据（start）
.rotate { transform: rotate(180deg); -ms-transform: rotate(180deg); /* Internet Explorer */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); /* Opera */ } .show_data { width: 100%; box-sizing: border-box; padding: 0 10px; max-height: 360px; overflow: hidden; overflow-y: auto; } .show_item { box-sizing: border-box; padding: 5px; border-bottom: 1px solid #eeefff; cursor: pointer; font-size: 14px; color: #323233; } .show_item:last-child { border-bottom: 1px solid #ffffff; } // 展示菜单数据（end）

// 检索项对其方式（start）
.jc_center { justify-content: center; } .jc_start { justify-content: flex-start; } // 检索项对其方式（end）

// 遮罩层
.mask { width: 100%; height: 100%; position: fixed; z-index: -1; left: 0; top: 0; background-color: rgba(10, 10, 10, 0.6); cursor: pointer; } // 文字样式类
.blue { color: #1989fa; } 

2、使用组件 2.1、html 部分

<retrieval :getData="retrievalTitle" :showData="showData" @openR="requestData" @implement="handleRetrieval" > components: { retrieval, }, data() { return { // 检索项 rI: 0, // 检索项默认值 / 会改变 retrievalTitle: [ { text: '全部状态', value: '' }, { text: '全部年份', value: '' }, { text: '全部月份', value: '' }, ], // 后端没给全部字段 Arrfirst: [ { text: '全部状态', value: '' }, { text: '全部年份', value: '' }, { text: '全部月份', value: '' }, ], // 需要传递给组件展示的数据 showData: [], } }, methods: { // 检索请求函数 async requestData(i) { let that = this; that.showData = []; this.rI = i; // 这里的数据需要跟传入组件的数据一致（包括顺序） let dis = ['gs_apply_task_status', 'gs_task_assessmentYear', 'month']; // 一个封装的 .js 文件导出的函数 // 函数需要传的参数就是 dis 中的某个值 let data = await that.dictionaries(dis[that.rI]); // that.Arrfirst[that.rI] 后没有给 全部 这个选项 that.showData = [that.Arrfirst[that.rI]].concat(data); }, // 检索函数 handleRetrieval(data) { let that = this; // 给 retrievalTitle 赋值， // 也就是 data 中默认值的变量 // 此操作会替换值到同一位置 this.retrievalTitle.splice(that.rI, 1, data); if (that.rI == 0) { this.query.applyTaskStatue = data.value; } else if (that.rI == 1) { this.query.applyYear = data.value; } else if (that.rI == 2) { this.query.applyMonth = data.value; } // 请求列表数据的函数 this.onRefresh(); }, }, }