前言: 由于uniapp没有提供,uView组件库也没有提供,于是封装了一个组件。
图片展示:
代码如下:
vagueSearch.vue
<template>
<view class="vagueSearch">
<view class="input">
<u--input class="search-input" type="text" v-model="curValue" :placeholder="placeholder" @input="input" border="none" />
<view class="list" v-if="isShow">
<template v-if="list.length > 0">
<view class="item" hover-class="item-hover" hover-stay-time="200" v-for="(item, i) in list" :key="i" @click="itemClick(item)">{{ item[label] }}</view>
</template>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'VagueSearch',
props: {
//placeholder内容
placeholder: {
type: String,
default: '请输入内容',
},
//模糊查询到的列表(由后台返回)
list: {
type: Array,
default: () => {
return [];
}
},
//列表内要展示的内容 字段 默认name
label: {
type: String,
default: () => {
return 'name';
}
},
// 当前类型
type: {
type: String,
default: ''
},
value: {
type: String,
}
},
data() {
return {
isShow: false, //是否显示搜索到的列表
curValue: '' //输入框绑定值
};
},
watch: {
list: {
handler (newVal) {
if (this.curValue === this.value && newVal.length == 1) {
this.$emit('confirmValue', newVal[0]);
this.close()
} else {
if (newVal.length && newVal.length > 0) {
this.open()
} else {
this.close()
}
}
},
deep: true
},
value: {
handler (newVal) {
this.curValue = newVal
},
immediate: true
},
},
methods: {
// 显示查询到的列表值
open() {
this.isShow = true;
},
// 隐藏查询到的列表值
close() {
this.isShow = false;
},
input(value) {
if (!value) return
this.curValue = value;
this.$emit('getInputValue', {value: value, type: this.type});
},
itemClick(e) {
this.curValue = e[this.label];
this.close();
this.$emit('confirmValue', e);
}
}
};
</script>
<style lang="scss" scoped>
.vagueSearch {
width: 100%;
.input {
position: relative;
.search-input {
box-sizing: border-box;
width: 100%;
height: 80rpx;
padding: 0 20rpx;
}
.list {
width: 100%;
max-height: 300rpx;
padding: 20rpx;
background-color: #ffffff;
box-shadow: 0 0 10rpx #888888;
border-radius: 10rpx;
z-index: 999;
position: absolute;
left: 0;
overflow: scroll;
.item {
padding: 5rpx 0;
font-size: 28rpx;
font-weight: bold;
text-align: center;
margin: 5rpx 0;
}
.item-hover {
background-color: #f5f5f5;
}
}
}
}
</style>
组件使用
// html代码
<u-form-item>
<VagueSearch
placeholder="请输入工作地"
:value="formData.workPlace"
@getInputValue="getInputValue"
:type="工作地"
:list="vagueList"
ref="vagueList"
:label="placeName"
@confirmValue="confirmValue" />
</u-form-item>
// js代码
// 模糊查询-输入信息
getInputValue(obj) {
let {value, type} = obj
switch (type) {
case '1':
break;
case '2':
break;
case '3':
break;
case '4':
break;
case '工作地':
debounce(this.workPlaceByCondition(value), 500)
break;
}
},
// 工作地
workPlaceByCondition(value) {
if (!this.optionArr.length) {
this.$common._showToast('请先选择区域')
return
}
workPlaceByCondition({
placeName: value,
pid: this.formData.pid,
cid: this.formData.cid
}).then(res => {
if(res.data && res.data.length) {
this.vagueList = res.data
if (this.vagueList.length == 1 && this.vagueList[0].placeName == value) {
this.formData.placeId = this.vagueList[0].id
this.formData.workPlace = this.vagueList[0].placeName
}
} else {
this.formData.workPlace = value
this.vagueList = []
this.$forceUpdate()
}
})
},
// 模糊查询选中
confirmValue(e) {
if (this.authType == 1 || this.authType == 3) {
// 工作地
this.formData.placeId = e.id
this.formData.workPlace = e.placeName
}
},