vue项目搜索组件

绝地灬酷狼 2022-09-10 14:26 200阅读 0赞

所有的搜索条件，以数据的形式传入组件，最终返回需要的数据。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQnJpZ2h0MjAxNw_size_12_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQnJpZ2h0MjAxNw_size_12_color_FFFFFF_t_70_g_se_x_16 1][]

![20210909113840408.png][]

代码

<template>
    	<div>
    		<div @click="searchClick">展示搜索组件</div>
    		<Filtrate :isShowFilter="showPopup" :isShowOverlay="isShowOverlay" :list="searchCondition"
    			@confirmFn="confirmFilter" @overlayClick='overlayClick'></Filtrate>
    	</div>
    </template>
    
    <script>
    	import Filtrate from '../components/filterComponent/index.vue'
    	export default {
    		components: {
    			Filtrate
    		},
    		data() {
    			return {
    				showPopup: true,
    				isShowOverlay: true,
    				searchCondition: [{
    						type: 'input',
    						name: '输入',
    						key: 'k1',
    						list: [{
    								text: '测试1',
    								value: '',
    								placeholder: '请输入纯数字',
    								regexp: '^[0-9]*$',
    								keyName: 'test1',
    								show: true,
    								disabled: false
    							},
    							{
    								text: '测试2',
    								value: '',
    								placeholder: '请输入6位数字',
    								regexp: '^\\d{6}$',
    								keyName: 'test2',
    								show: true,
    								disabled: false
    							},
    							{
    								text: '测试3',
    								value: '',
    								placeholder: '请输入3~8位的数字',
    								regexp: '^\\d{3,8}$',
    								keyName: 'test3',
    								show: true,
    								disabled: false
    							},
    							{
    								text: '测试4',
    								value: '',
    								placeholder: '请输入3~8位的字符',
    								regexp: '^.{3,8}$',
    								keyName: 'test4',
    								show: true,
    								disabled: false
    							},
    							{
    								text: '测试5',
    								value: '',
    								placeholder: '禁止输入含有~的字符',
    								regexp: '[^~\\x22]+',
    								keyName: 'test5',
    								show: true,
    								disabled: false
    							},
    							{
    								text: '测试6',
    								value: '',
    								placeholder: '请输入字母开头,长度6~18,只包含字母数字下划线',
    								regexp: '^[a-zA-Z]\\w{5,17}$',
    								keyName: 'test6',
    								show: true,
    								disabled: false
    							}
    						],
    						show: true
    					},
    					{
    						type: 'selectRadio',
    						name: '单选',
    						key: 'k2',
    						list: [{
    								text: '选项1',
    								value: '001'
    							},
    							{
    								text: '选项2',
    								value: '002'
    							},
    							{
    								text: '选项3',
    								value: '003'
    							},
    							{
    								text: '选项4',
    								value: '004'
    							},
    							{
    								text: '选项5',
    								value: '005'
    							},
    							{
    								text: '选项6',
    								value: '006'
    							}
    						],
    						value: '',
    						keyName: 'selectRadio',
    						show: true,
    						disabled: false
    					},
    					{
    						type: 'selectMultiple',
    						name: '多选',
    						key: 'k2',
    						list: [{
    								text: '选项1',
    								value: '001',
    								checked: false
    							},
    							{
    								text: '选项2',
    								value: '002',
    								checked: false
    							},
    							{
    								text: '选项3',
    								value: '003',
    								checked: false
    							},
    							{
    								text: '选项4',
    								value: '004',
    								checked: false
    							},
    							{
    								text: '选项5',
    								value: '005',
    								checked: false
    							},
    							{
    								text: '选项6',
    								value: '006',
    								checked: false
    							}
    						],
    						value: '',
    						keyName: 'selectMultiple',
    						show: true,
    						disabled: false
    					},
    					{
    						type: 'date',
    						name: '开始时间',
    						key: 'k3',
    						value: new Date(),
    						keyName: 'startTime',
    						show: true,
    						disabled: false
    					},
    					{
    						type: 'date',
    						name: '结束时间',
    						key: 'k4',
    						value: new Date(),
    						keyName: 'endTime',
    						show: true,
    						disabled: false
    					}
    				]
    			}
    		},
    		computed: {
    
    		},
    		mounted() {
    
    		},
    		methods: {
    			searchClick() {
    				this.showPopup = true
    				this.isShowOverlay = true
    			},
    			overlayClick() {
    				this.showPopup = false
    				this.isShowOverlay = false
    			},
    			confirmFilter(value) {
    				console.log('打印111', value)
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

组件

<template>
    	<div class="filter-component">
    		<van-popup :value="isShowFilter" position="right" :overlay="isShowOverlay" :style="{ height: '100%' }"
    			:safe-area-inset-bottom="true" :close-on-click-overlay="false" @click-overlay="overlayClick">
    			<div class="filter-box">
    				<div class="filter_type_box">
    					<template v-for="(item, index) in formArray">
    						<div v-if="item.type === 'input'" class="form-item form-input" :key="index" v-show="item.show">
    							<div class="searchTitle">{
       { item.name }}</div>
    							<div class="input_content">
    								<template v-for="(item1, index1) in item.list" v-if="item1.show">
    									<div class="type_content_flex" :key="`${item1.key + '-' + index1}`">
    										<div class="titleName">{
       { item1.text }}</div>
    										<input v-model="item1.value" type="text" :placeholder="item1.placeholder"
    											class="titleInput" />
    									</div>
    								</template>
    							</div>
    						</div>
    						<div v-if="item.type === 'selectRadio'" class="form-item form-select" :key="index" v-show="item.show">
    							<div class="searchTitle">{
       { item.name }}</div>
    							<div class="type_content">
    								<template v-for="(item1, index1) in item.list">
    									<div :key="`${item1.key + '-' + index1}`" :aa="item1.value"
    										@click="selectRadioFunc(item1, index, index1, item)" :class="[
                          'switchClass',
                          item1.value === activeValue && activeValue!==''
                            ? 'activeCss'
                            : ''
                        ]">
    										{
       { item1.text }}
    									</div>
    								</template>
    							</div>
    						</div>
    						<div v-if="item.type === 'selectMultiple'" class="form-item form-select" :key="index" v-show="item.show">
    							<div class="searchTitle">{
       { item.name }}</div>
    							<div class="type_content">
    								<template v-for="(item1, index1) in item.list">
    									<div :key="`${item1.key + '-' + index1}`" @click="selectItemFunc(item1,index)"
    										:class="['switchClass', item1.checked ? 'activeCss' : '']">
    										{
       { item1.text }}
    									</div>
    								</template>
    							</div>
    						</div>
    						<div v-if="item.type === 'date'" class="form-item form-date" :key="index" v-show="item.show">
    							<div class="searchTitle">{
       { item.name }}</div>
    							<div class="type_content">
    								<div class="type_date">
    									<van-datetime-picker v-model="item.value" type="date" :show-toolbar="false"
    										:visible-item-count="3" />
    								</div>
    							</div>
    						</div>
    					</template>
    					<div class="bottom-copy"></div>
    				</div>
    			</div>
    			<div class="bottomBar">
    				<span @click="reset">重置</span>
    				<span @click="confirmFn">确定</span>
    			</div>
    		</van-popup>
    	</div>
    </template>
    
    <script>
    	import * as dayjs from 'dayjs'
    	export default {
    		props: {
    			isShowFilter: {
    				type: Boolean,
    				default: false
    			},
    			isShowOverlay: {
    				type: Boolean,
    				default: true
    			},
    			list: {
    				type: Array,
    				default: () => []
    			}
    		},
    		data() {
    			return {
    				aryData: [], // 多选的值
    				activeValue: '' // 单选选中的值
    			}
    		},
    		created() {
    
    		},
    		computed: {
    			formArray: {
    				get() {
    					return this.list
    				},
    				set() {
    					console.log('set')
    				}
    			}
    		},
    		mounted() {},
    		watch: {},
    		methods: {
    			overlayClick() {
    				// 点击遮罩关闭组件（需设置close-on-click-overlay为false，已默认设置）
    				this.$emit('overlayClick')
    			},
    			selectRadioFunc(item1, index) {
    				// 单选
    				this.activeValue = item1.value
    				this.$set(this.formArray[index], 'value', item1.value)
    			},
    			selectItemFunc(item1, index) {
    				// 多选
    				item1.checked = !item1.checked
    				if (item1.checked) {
    					this.aryData.push(item1.value)
    				} else {
    					let arr = this.aryData
    					arr.splice(arr.findIndex(item => item === item1.value), 1)
    				}
    				let valueData = this.aryData.toString()
    				this.$set(this.formArray[index], 'value', valueData)
    			},
    			reset() {
    				// 重置
    				this.formArray.forEach((item, indexVal) => {
    					// 输入框
    					if (item.type === 'input') {
    						this.formArray[indexVal].list.forEach((item2, indexVal2) => {
    							this.$set(this.formArray[indexVal].list[indexVal2], 'value', '')
    						})
    					}
    					// 单选
    					if (item.type === 'selectRadio') {
    						this.activeValue = ''
    						this.$set(this.formArray[indexVal], 'value', '')
    					}
    					// 多选
    					if (item.type === 'selectMultiple') {
    						this.formArray[indexVal].list.forEach((item2, indexVal2) => {
    							item2.checked = false
    						})
    						this.aryData = []
    						this.$set(this.formArray[indexVal], 'value', '')
    					}
    					// 时间
    					if (item.type === 'date') {
    						this.$set(this.formArray[indexVal], 'value', new Date())
    					}
    				})
    				this.$emit('resetFn')
    			},
    			confirmFn() {
    				// 确定
    				let keyData = {}
    				console.log("组件数据", this.formArray)
    				for (let k = 0; k < this.formArray.length; k++) {
    					if (this.formArray[k].type === 'input' && this.formArray[k].show) {
    						for (let g = 0; g < this.formArray[k].list.length; g++) {
    							if (this.formArray[k].list[g].show) {
    								const regexpFn = new RegExp(this.formArray[k].list[g].regexp)
    								let val = this.formArray[k].list[g].value
    								if (val === '') {
    									this.$toast(this.formArray[k].list[g].text + '不能为空')
    									return false
    								} else {
    									if (regexpFn.test(val)) {
    										keyData. [this.formArray[k].list[g].keyName] = this.formArray[k].list[g].value
    									} else {
    										this.$toast(this.formArray[k].list[g].text + '\n' + this.formArray[k].list[g]
    											.placeholder)
    										return false
    									}
    								}
    							}
    						}
    					}
    					if (this.formArray[k].type === 'selectRadio' && this.formArray[k].show) {
    						keyData. [this.formArray[k].keyName] = this.formArray[k].value
    					}
    					if (this.formArray[k].type === 'selectMultiple' && this.formArray[k].show) {
    						keyData. [this.formArray[k].keyName] = this.formArray[k].value
    					}
    					if (this.formArray[k].type === 'date' && this.formArray[k].show) {
    						keyData. [this.formArray[k].keyName] = dayjs(new Date(this.formArray[k].value)).format(
    							'YYYY-MM-DD')
    					}
    				}
    				console.log('所有的key', keyData)
    			    this.$emit('confirmFn', keyData)
    			}
    		}
    	}
    </script>
    <style lang="less" scoped>
    	.van-popup {
    		position: fixed;
    		max-height: 100%;
    		overflow-y: auto;
    		background-color: #fff;
    		-webkit-transition: -webkit-transform 0.3s;
    		transition: -webkit-transform 0.3s;
    		transition: transform 0.3s;
    		transition: transform 0.3s, -webkit-transform 0.3s;
    		-webkit-overflow-scrolling: touch;
    	}
    
    	.van-popup--right {
    		top: 50%;
    		right: 0;
    		-webkit-transform: translate3d(0, -50%, 0);
    		transform: translate3d(0, -50%, 0);
    	}
    
    	.filter-box {
    		width: 6rem;
    		background: #ffffff;
    		box-sizing: border-box;
    		padding: 0.58rem 3px 0.3rem 30px;
    		height: calc(100% - 0.8rem);
    		overflow-y: auto;
    
    		.form-select {
    			.label {
    				color: #333333;
    				font-size: 0.24rem;
    			}
    		}
    	}
    
    	.bottomBar {
    		width: 100%;
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		border-top: 1px solid #dddddd;
    
    		>span:nth-child(1) {
    			width: 50%;
    			height: 0.8rem;
    			background: #ffffff;
    			font-size: 0.32rem;
    			color: #1f1f1f;
    			line-height: 0.8rem;
    			text-align: center;
    			display: inline-block;
    		}
    
    		>span:nth-child(2) {
    			width: 50%;
    			height: 0.8rem;
    			background: #30dbc0;
    			font-size: 0.32rem;
    			color: #ffffff;
    			line-height: 0.8rem;
    			text-align: center;
    			display: inline-block;
    		}
    	}
    
    	.filter_type_box {
    		width: 100%;
    		box-sizing: border-box;
    
    		>div {
    			width: 100%;
    			padding: 0;
    
    			>.searchTitle {
    				font-size: 29px;
    				color: #333333;
    				font-weight: bold;
    			}
    
    			>.input_content {
    				margin-bottom: 20px;
    
    				.type_content_flex {
    					width: 100%;
    					display: flex !important;
    					padding: 23px 0 27px 0;
    					border-bottom: 1px solid #dddddd;
    
    					.titleName {
    						width: 80px;
    						font-size: 28px;
    						color: #666666;
    					}
    
    					.titleInput {
    						width: calc(100% - 80px);
    						font-size: 28px;
    						color: #333333;
    						border: 0 !important;
    						height: auto !important;
    						font-weight: 700;
    					}
    
    					.titleInput::-webkit-input-placeholder {
    						color: #bbbbbb;
    						font-size: 25px;
    						font-weight: 400;
    					}
    				}
    			}
    
    			>.type_content {
    				display: flex;
    				flex-wrap: wrap;
    				margin-top: 20px;
    				box-sizing: border-box;
    
    				>.type_date {
    					width: 100%;
    					margin-bottom: 20px;
    
    					/deep/.van-picker-column__item.van-picker-column__item--selected {
    						font-size: 0.34rem !important;
    						color: #30dbc0 !important;
    					}
    				}
    
    				>.switchClass {
    					width: calc((100% - 55px) / 3);
    					margin-right: 20px;
    					margin-bottom: 20px;
    					background-color: #f2f2f2;
    					border-radius: 8px;
    					height: 67px;
    					line-height: 68px;
    					text-align: center;
    					color: #333333;
    					border: 1px solid #f2f2f2;
    					box-sizing: border-box;
    					white-space: nowrap;
    					overflow: hidden;
    					text-overflow: ellipsis;
    
    					&:nth-child(3n) {
    						margin-right: 0;
    					}
    
    					/deep/ &.activeCss {
    						background-color: rgba(48, 219, 192, 0.05);
    						border: 1px solid #30dbc0;
    						border-radius: 8px;
    						color: #30dbc0;
    					}
    				}
    			}
    		}
    	}
    </style>

界面安装了几个插件，下面是我的配置，需要的可以看看

package.json

{
    	"name": "default",
    	"version": "0.1.0",
    	"private": true,
    	"scripts": {
    		"serve": "vue-cli-service serve",
    		"build": "vue-cli-service build"
    	},
    	"dependencies": {
    		"core-js": "^2.6.5",
    		"countup.js": "^2.0.7",
    		"echarts": "^4.6.0",
    		"less": "^3.13.1",
    		"less-loader": "^5.0.0",
    		"vant": "^2.6.0",
    		"view-design": "^4.6.0-beta.4",
    		"vue": "^2.6.10",
    		"vue-countup-v2": "^4.0.0",
    		"vue-router": "^3.5.2",
    		"vuex": "^3.6.2"
    	},
    	"devDependencies": {
    		"@vue/cli-plugin-babel": "^3.8.0",
    		"@vue/cli-service": "^4.5.13",
    		"dayjs": "^1.10.6",
    		"postcss-pxtorem": "^5.1.1",
    		"vue-template-compiler": "^2.6.14",
    		"webpack": "^4.28.4",
    		"webpack-cli": "^4.7.2"
    	}
    }

单位的话，做了适配可以在另一篇文章中看看

[https://bright2017.blog.csdn.net/article/details/120198280][https_bright2017.blog.csdn.net_article_details_120198280]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQnJpZ2h0MjAxNw_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e6983a54014a4b92838b13822c9b60d6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQnJpZ2h0MjAxNw_size_12_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/85bf9834f93a43a0880600914562b559.png
[20210909113840408.png]: /images/20220829/e05b9e5a762643eba557512760fa8b3e.png
[https_bright2017.blog.csdn.net_article_details_120198280]: https://bright2017.blog.csdn.net/article/details/120198280