Vant DropdownMenu 下拉菜单带搜索功能

最新推荐文章于 2024-09-02 18:00:12 发布

LHC087

最新推荐文章于 2024-09-02 18:00:12 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43829905/article/details/137560520

Vant DropdownMenu 下拉菜单带搜索功能

效果图：
在这里插入图片描述

上代码：

 <van-dropdown-menu active-color="#E33737">
      <van-dropdown-item ref="dropdownItem">
        <template #title>
          <span>{{ dropdownItem.text }}</span>
        </template>
        <div class="dropdown_search">
          <van-search shape="round" v-model="searchValue" placeholder="请输入搜索关键词" @input="searchFun" />
        </div>
        <div class="dropdown_radio">
          <van-radio-group v-model="dropdownValue">
            <van-cell-group>
              <van-cell v-for="(item, index) in dropdownFilterActions" :key="index" :value="item.text" clickable center
                @click="onChangeSelect(item.value)">
                <template #right-icon>
                  <van-radio :name="item.value" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
  data() {
    return {
      dropdownValue: '',
      dropdownItem: { text: '全部', value: '730' },
      searchValue: '',
      dropdownFilterActions: [], //过滤的数据
      dropdownActions: [ //原数据
        { text: '近一周', value: '7' },
        { text: '近一个月', value: '30' },
        { text: '近一年', value: '365' },
        { text: '全部', value: '730' }
      ]
      }
    }
  
  created() {
    this.dropdownFilterActions = this.dropdownActions
  },
  methods: {
    searchFun() {
      if (this.searchValue === '' || this.searchValue === null) {
        this.dropdownFilterActions = this.dropdownActions;
      } else {
        this.dropdownFilterActions = this.dropdownActions.filter(item => item.text.includes(this.searchValue))
      }
    },
    onChangeSelect(value) {
      this.dropdownItem = this.dropdownFilterActions.find(item => {
        return item.value === value;
      });
      this.searchValue = '';
      this.searchFun();
      this.$refs.dropdownItem.toggle()
      this.dropdownValue = value;
    },
}

<style lang="less" scoped>
.dropdown_search {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
}

.dropdown_radio {
  :deep(.van-cell__value--alone) {
    text-align: center;
  }

  :deep(.van-radio__icon .van-icon) {
    border: unset;
    background: unset;
    border-color: unset;
    font-size: @-size-m;
  }

  :deep(.van-radio__icon--checked .van-icon) {
    color: @-color-primary;
  }
}
</style>