vant picker选择器组件增加search搜索功能

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

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

我用的是第二种方法：在picker上面加个搜索框，不过我用的van-field。

首先页面上的选择框其实是个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;
};

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

也希望有大佬不吝赐教。

vant picker选择器组件增加search搜索功能

猜你喜欢