van-field+van-picker实现过滤和模糊搜索

玛已

已于 2022-06-30 17:34:01 修改

阅读量5.7k

点赞数 2

分类专栏： vue 前端文章标签： javascript 前端 html5

于 2021-05-30 20:17:04 首次发布

本文链接：https://blog.csdn.net/qq_41028148/article/details/117330467

版权

本文介绍了如何使用van-field、van-popup、van-search和van-picker封装一个带有模糊搜索和过滤功能的选择器组件，适用于移动端项目。在Vue3环境下，详细阐述了组件的功能实现，包括弹出层选择器组件、选择器组件的定制以及选中数据定位的附加功能。同时，提供了注意事项和实际代码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在做的一个移动端项目中主要使用了vant组件库，模块中有大量需要选择器的地方，优先考虑使用vant的原生组件，故使用van-field+van-popup+van-search+van-picker实现一个选择器组件，与官方文档Form表单里的选择器效果类似
在这里插入图片描述

由于原生组件的一些限制，需要加上一些定制化功能，只能封装，过程与结果如下

封装目标

效果

在这里插入图片描述

点击外部输入框，展示弹出层，有输入框和选择器，点击取消，弹出框消失，点击确认，将选择的数据传入外部。

模糊搜索

点击外部输入框，展示弹出层，输入数据，调后台接口，获取选择器展示的列表数据进行刷新

过滤选择器

点击外部输入框，展示弹出层，展示已有下拉数据列表，输入数据，根据输入参数匹配下拉选项

注意事项

下拉数据：对象数组
展示数据：可能为一个字段，可能为字段拼接
参数：可能为一个字段，可能为一个对象

功能实现

弹出层选择器组件

模糊搜索功能+过滤功能

<!--
* @Author:Daisy
* @Date: 2021/5/30
* @Desc: 模糊搜索/过滤
-->
<template>
  <div class="selector">
    <van-popup v-model="showPicker" position="bottom" :close-on-click-overlay="false" @click-overlay="close">
      <van-search v-if="remote || filterable" v-model="searchText" placeholder="搜索" @input="onSearch"> </van-search>
      <van-picker show-toolbar :columns="showOptions" @confirm="onConfirm" @cancel="close" @change="onChange">
        <template #option="item">
          {
   {
    getShowData(item) }}
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>
<script>
export default {
   
  name: 'selector',
  props: {
   
    //下拉选项保存值
    searchValue: {
   
      type: String,
      default: 'id'
    },
    //下拉展示的字段，可以是单个属性，也可以是多个属性拼接
    // 单属性 label='name'|| 多属性 :label="['key', 'name']"
    searchLabel: {
   
      type: [String, Array],
      default: 'value'
    },
    //弹出层是否展示
    showPicker: {
   
      type: Boolean,
      default: false
    },
    // 下拉列表
    options: {
   
      type: Array,
      default: () => []
    },
    //是否需要过滤
    filterable: {
   
      type: Boolean,
      default: false
    },
    //是否为远程搜索
    remote: {
   
      type: Boolean,
      default: false
    }
  },
  data() {
   
    return {
   
      searchText: '', //搜索参数
      currentChoose: null, //当前选中值
      showOptions: [] //展示的下拉列表
    };
  },
  watch: {
   
    //模糊搜索时需同步更新展示的下拉列表
    options(val) {
   
      if (this.remote) {
   
        this.showOptions = val;
      }
    }
  },
  created() {
   
    this.$nextTick(() => {
   
      this.showOptions = this.options.slice(0);
    });
  },
  methods:

最低0.47元/天解锁文章