【vant 自定义多项下拉框】

一、示例图片

1. 项目1
   

二、相关代码

<template>
  <div class="boddy_color">
    <div class="search-box">
      <!--      阻止冒泡-->
      <div @click.prevent>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="options"
          @select="onSelect"
        >
          <template #reference>
            <button
              icon="arrow-down"
              type="default"
            >
              {{ btnName }}
              <van-icon name="arrow-down"/>
            </button>
          </template>
        </van-popover>
      </div>


      <!--      <select-->
      <!--        v-model="selectedOption"-->
      <!--        class="selectName"-->
      <!--      >-->
      <!--        <option-->
      <!--          v-if="all"-->
      <!--          value=""-->
      <!--        >-->
      <!--          全部-->
      <!--        </option>-->
      <!--        <option-->
      <!--          v-for="option in options"-->
      <!--          :key="option.value"-->
      <!--          :value="option.value"-->
      <!--        >-->
      <!--          {{ option.label }}-->
      <!--        </option>-->
      <!--      </select>-->

      <input
        v-if="selectBtnName != btnName"
        v-model.trim="inputValur"
        type="text"
        :style="{width: width}"
        :placeholder="placeholder"
        @change="changeInput"
      >
      <van-field
        v-else
        v-model.trim="fieldValue"
        is-link
        readonly
        border
        placeholder="请选择分类"
        @click="showType = true"
      />
      <button
        v-if="showBtn"
        @click="handleSearch"
      >
        {{ searchBtnName }}
      </button>
    </div>
    <van-popup
      v-model="showType"
      round
      position="bottom"
    >
      <van-cascader
        v-model="cascaderValue"
        title="请选择商品分类"
        :options="typeOptions"
        :field-names="fieldNames"
        active-color="#1989fa"
        @close="showType = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
import {ArrTree} from '@/utils/common';
import CrudJpSelect from '@/api/Boutique/jpSelect';
export default {
    props: {
        // 类目选项
        options: {
            type: Array,
            required: true
        },
        // 按钮搜索
        showBtn: {
            type: Boolean,
            default: false
        },
        // 失去焦点搜索
        showInputBlur: {
            type: Boolean,
            default: true
        },
        // 默认类目value
        selectedOption: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '100%'
        },
        // 默认类目key
        btnName: {
            type: String,
            default: ''
        },
        all: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '请输入关键字'
        },
        // 搜索按钮名称
        searchBtnName: {
            type: String,
            default: '搜索'
        },
        // 输入框值
        searchKeyword: {
            type: String,
            default: null
        },
        // 多项选择默认类目
        selectBtnName: {
            type: String,
            default: '商品分类'
        },
        // 多项选择数据源
        selectData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            showPopover: false,
            showType: false,
            cascaderValue: '',
            fieldValue: '',
            fieldNames: {
                text: 'typeName',
                value: 'id',
                children: 'children'
            },
            typeOptions: [],
            inputValur: this.searchKeyword
        };
    },
    created() {
        this.inputValue = this.searchKeyword; // 初始化 inputValue
        if (this.selectBtnName === '商品分类') {
            this.getjpType();
        } else {
            this.typeOptions = this.selectData;
        }
    },
    methods: {
        async getjpType() {
            await CrudJpSelect.jpType({enabled: true}).then(res => {
                if (res && res.content.length > 0) {
                    const typeDataOne = ArrTree(res.content);
                    this.typeOptions = typeDataOne.sort((a, b) => a.sorting - b.sorting);
                }
            });
        },
        onFinish({selectedOptions}) {
            this.showType = false;
            this.fieldValue = selectedOptions.map((option) => option.typeName).join('/');
            this.inputValur = selectedOptions[selectedOptions.length - 1].id;
            this.changeInput();
        },
        changeInput() {
            if (this.showInputBlur) {
                this.handleSearch();
            }
        },
        handleSearch() {
            // 触发父组件的搜索事件，将选择器和输入框的值传递给父组件处理
            this.$emit('search', {
                optionValue: this.selectedOption,
                keyword: this.inputValur
            });
        },
        onSelect(select) {
            if (select) {
                this.searchKeyword = '';
                this.fieldValue = '';
                this.inputValur = '';
                this.btnName = select.text;
                this.selectedOption = select.icon;
                if (this.showInputBlur) {
                    this.handleSearch();
                }
            }
        }
    }
};
</script>

<style>
.van-popover {
    max-height: 50vh;
    overflow: auto;
}
</style>
<style scoped>
.search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    margin: 0 10px;
    padding: 10px 0;
    color: #999; /* 将字体颜色设置成浅灰色 */
}

input[type='text'] {
    padding: 6px 10px 6px 8px;
    border: 1px solid #f5f5f5;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    flex: 1;
    color: inherit; /* 继承父元素 .search-box 的字体颜色 */
    margin-right: 0; /* 添加样式 */
}

button {
    padding: 5px 0 5px 10px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #f5f5f5;
    //border: none;
    width: auto;
    font-size: 14px;
    cursor: pointer;
    margin-right: 0; /* 添加样式 */
}

.boddy_color {
    background: #ffffff;
    width: 100%;
}
/deep/ .van-cell{
  padding: 2px 3.784vw;
  flex: 1;
  border: 0.27vw solid #f7f7f7;
}
/deep/ .van-field__control{
  color: #999;
}
</style>

三、使用

    <van-search-select
      placeholder="商品名称/商品代码"
      :options="searchOptions"
      :selected-option="selectedOption"
      :btn-name="btnName"
      select-btn-name="类型"
      :select-data="cwCouponsType"
      @search="handleSearch"
    />