vant picker选择器组件增加search搜索功能持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

今天来记录一下vant使用。

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

关于vant的介绍和用法在官网中可以看到这里就不多收了。

vant 用在移动端的小项目还是挺合适的，但也有一些不符合需求的地方，比如它的picker选择器有个问题，就是没有搜索功能。

其实想要有搜索功能的下拉框或许可以自己组合：比如把picker与IndexBar 索引栏结合起来，或者把picker与search搜索功能组合。

步骤如下：

首先页面上的选择框其实是个vant-field，点击该vant-field就显示popup

<van-field
  v-model="data.nation"
  right-icon="arrow"
  :readonly="true"
  placeholder="国家"
  class="m-b-32 border-radius-22 min-height-100"
  @click="data.isNationSelectShown = true"
/>

poup中放一个vant-field 和一个 picker。关于国家至少需要两个变量：一个用来存放所有国家，一个用来存放筛选出来的国家

<!-- 选择国家的弹框 -->
    <van-popup
      v-model:show="data.isNationSelectShown"
      position="bottom"
      round
      class="popup-container-style"
    >
      <van-field
        placeholder="在这里查询国家"
        v-model="data.keyWord"
        left-icon="search"
        @update:model-value="handleSearchNations(data.keyWord)"
      />
      <van-picker
        :columns="data.columns"
        :confirm-button-text="$t('confirm')"
        :cancel-button-text="$t('cancel')"
        :columns-field-names="columnsFieldNames"
        @cancel="handleCancel"
        @confirm="onConfirm"
      />
    </van-popup>

监听2中的vant-field的变化，来过滤picker的数据源：全部国家的数组不能动

const data: any = reactive({
  isNationSelectShown: false, // 筛选下拉框的选择
  keyWord: "", // 搜索国家的关键字
  isNotifyShow: false,
  nation: "",
  nationValue: "",
  allNations: [], // 全部的国家
  columns: [], // 用于下拉框的数据
  isBottomshow: true, //显示或者隐藏footer
});

// 检索国家
const handleSearchNations = (keyWord: string) => {
  const t: any = [];
  data.allNations.forEach((item: any) => {
    if (item.name.indexOf(keyWord) > -1) {
      t.push(item);
    }
  });
  data.columns = t;
};

点击确定的时候给1中的vant-field（也就是主页面上的输入框）赋值。别忘了确定按钮的时候赋值，是否情况筛选可以自行决定，包括取消的时候

// 选择国家点击确认
const onConfirm = ({ selectedValues, selectedOptions }) => {
  // console.log("确认---selectedOptions");
  // console.log(selectedValues);
  // console.log(selectedOptions);
  data.isNationSelectShown = false;
  data.isNationSelectShown = false;
  data.keyWord = "";
  data.columns = data.allNations;

  showPicker.value = false;
  data.nation = selectedOptions[0].name;
  localStorage.set("locale", selectedOptions[0].code);
  data.nationValue = selectedOptions[0].code;
};

// 选择国家点击取消
const handleCancel = () => {
  data.isNationSelectShown = false;
  data.keyWord = "";
  data.columns = data.allNations;
};

以上是其中一种解决方案，希望本文对您有所帮助！

这个方案我在电脑上测试没问题，但是还没机会部署到线上在移动端看效果，所以担忧有个潜在的问题：选择国家的弹框出来之后，焦点放在搜索框中，那手机的软键盘就会弹出，这样会不会导致软键盘挡住国家的选项？

也希望有大佬不吝赐教。