<template>
<!-- <div> -->
<van-popup v-model="showPicker_more" position="bottom">
<van-search :placeholder="placeholder" v-model="interpolateSearch" />
<!-- @cancel="showPicker_more = false" -->
<van-picker show-toolbar :columns="userFilter(interpolateSearch)" :value-key="valueName" @confirm="onConfirm" @cancel="showPicker_more = false" />
</van-popup>
<!-- </div> -->
</template>
<script>
export default {
name: 'searchPicker',
props: {
placeholder: {
type: String,
default: '请输入'
},
// valueKey: { // 需要展示的是id 还是name 自己传
// type: String,
// default: ''
// },
list: { // 需要展示的数组
type: Array,
default: () => []
},
valueName: { // 需要展示的数组的name
type: String,
default: ''
},
valueId: { // 需要展示的数组的id
type: String || Number,
default: ''
}
},
data () {
return {
showPicker_more: false,
interpolateSearch: '' // 输入框数据
}
},
computed: {
},
methods: {
openMet () {
this.showPicker_more = true
this.interpolateSearch = ''
},
userFilter (query = '') {
if (query === null) {
query = ''
}
if (this.list && this.list.length > 0 && this.valueName !== '' && this.valueId !== '') {
const arr = this.list.filter((item) => {
return item[this.valueName].includes(query) || (item[this.valueId] + '').includes(query)
})
if (arr.length > 300) {
return arr.slice(0, 300)
} else {
return arr.slice(0, 300)
}
}
},
onConfirm (val) { // 确定
this.$emit('onConfirm', val)
this.showPicker_more = false
}
}
}
</script>
<style lang="scss" scoped>
/deep/.van-field__body input{
text-align: left !important;
}
</style>
移动端vant--带搜索的一个组件
于 2021-03-08 17:19:57 首次发布