移动端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>
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>

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