uni-app + vant 实现可搜索的popup

最新推荐文章于 2025-04-06 20:06:38 发布

Eshine、

最新推荐文章于 2025-04-06 20:06:38 发布

阅读量417

点赞数 3

分类专栏： uni-app 文章标签： uni-app 可搜索的popup 移动端可搜索的选择框 uniapp+vant 可搜索选择框

本文链接：https://blog.csdn.net/listener_life/article/details/138322474

版权

使用场景：

产品要求需要下拉选择，并且可以搜索对应的值，针对移动端没有类似的案例，因此vant+uni-app相结合，实现了可搜索的popup，具体代码如下：

dom解构

<template>
  <!-- uni-app结合vant组件库，实现可搜索的弹层,只能单选 -->
  <view class="popup-vant-select" @click.prevent="handleOpen">
    <!-- :class="{ open: popupOpenFlag, clear: (props.clear && selectLabel) }" -->
    <text
      class="icon"
      :class="{ open: popupOpenFlag, clear: props.clear && selectLabel }"
      @click.stop="handleClear"
    ></text>
    <!-- 下拉框中显示默认的值 -->
    <view v-if="!selectLabel" class="placeholder">{
  { props.placeholder }}</view>
    <!-- 下拉框中显示选择的值 -->
    <view v-else>{
  { selectLabel }}</view>
    <uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false">
      <view class="select-box">
        <view v-if="props.title" class="title">这里可以设置标题</view>
        <view class="btn-box">
          <text class="cancel" @click="handleCancel">取消</text>
          <text class="confirm" @click="handleConfirm">确定</text>
        </view>
        <CommonSearch
          v-if="props.filterable"
          @input="hanndleInput"
          placeholder="请输入"
          background="#fff"
        />
        <!-- option-height:选项高度；visible-option-num：可见的选项个数 -->
        <Picker
          :show-toolbar="false"
          v-model="selectValue"
          :columns="list"
          option-height="40rpx"
          visible-option-num="4"
          :columns-fi

最低0.47元/天解锁文章