移动端vant--带搜索的一个组件

<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>exportdefault{
  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=truethis.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>

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试