項(xiàng)目要做移動(dòng)端，部分功能遷移過(guò)程中發(fā)現(xiàn)，VantUI組件庫(kù)不支持原Element組件庫(kù)的部分功能，例如el-select 可以做到輸入的同時(shí)下拉選擇 下拉多選。
故需要手動(dòng)改寫(xiě)，分享記錄下代碼。

效果圖


文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-511783.html

<script setup lang="ts">
import { ref,reactive,computed,watch,watchEffect,onMounted } from "vue";//各種API
import store from '../../store'
import router from '../../router'
import { useRouter } from 'vue-router';
const $router = useRouter();


onMounted(()=>{
  getEstimateTime('estimateTime').then((res) => {
    quickReplyList.value = res.data.map((v) => {
      return { text: v.codeName };
    });
    quickReplyList.value.forEach((item,index) => {
      item.value = index
    });
  });
  getUserList('SHJS').then(res=>{
    userAssignList.value = res.data
    userAssignList.value.forEach((item,index) => {
      item.text = item.userName
      item.value = index
      item.checked = false
    });
  })
})

const quickReplyList = ref([]);
function QuickReplySelect ({ selectedValues }) {
  userAssignReply.value = quickReplyList.value[selectedValues].text
  showPickerReply.value = false
};

const userAssign = ref([]);
const userAssignText = ref('');
const userAssignReply = ref('');
const userAssignList = ref([]);
const dialogShow = ref(false);
const showPickerCheckbox= ref(false);
const checkboxRefs = ref([]);
function toggle(index:number){
  checkboxRefs.value[index].toggle();
};
function zhipaiSelect () {
  let arr:any[] = [];
  if(userAssign.value.length>0){
    userAssign.value.forEach(it=>{
      arr.push(userAssignList.value.find(item=>item.userId==it).userName)
    })
  }
  userAssignText.value = arr.join()
  showPickerCheckbox.value = false
};
function zhipaihandleSubmit() {
  if(!userAssign.value){
    showToast('請(qǐng)選擇處理人');
    return
  }
  setAssign({
    userIds:userAssign.value,//數(shù)組
    label: userAssignReply.value
  }).then((res) => {
    showNotify({ type: 'success', message: '成功' });
    dialogShow .value = false
    userAssign.value = ''
    userAssignReply.value = ''
  });
}




</script>

<template>
  <div class="detail-div">
  <van-button round color="#169bd5" @click="dialogShow = true”  style="width:98vw"
                >認(rèn)  領(lǐng)</van-button>
  
    <van-dialog v-model:show="dialogShow"  title="測(cè)試下拉輸入框與彈窗選擇" 
                show-cancel-button @confirm="zhipaihandleSubmit" :before-close="onBeforeClose">
                
      <van-field>
        <template #input>
          <van-field
            v-model="userAssignText"
            is-link
            readonly
            label="處理人"
            placeholder="請(qǐng)選擇"
            @click="showPickerCheckbox= true"
          />
        </template>
      </van-field>

      <van-field  v-if="currentRow.status==2">
        <template #input>
          <van-field
            v-model="userAssignReply"
            label="快捷回復(fù)"
            placeholder="請(qǐng)輸入內(nèi)容"
          />
          <van-button @click="showPickerReply= true" size="mini" icon="arrow-down" />
        </template>
      </van-field>
    </van-dialog>
    
    <van-popup v-model:show="showPickerReply" position="bottom">
      <van-picker
        title="快捷回復(fù)"
        :columns="quickReplyList"
        @confirm="QuickReplySelect"
        @cancel="showPickerReply= false"
      />
    </van-popup>

    <!-- 彈窗多選列表 -->
    <van-popup v-model:show="showPickerCheckbox" position="bottom">
      <div style="display: flex;justify-content: space-between;height:44px;line-height:44px;">
        <van-button style="border:none;color:#969799;" @click="showPickerCheckbox= false" size="normal">取消</van-button>
        <span style="font-size:16px;font-weight:bold;">處理人</span>
        <van-button style="border:none;color:#6398fb;" @click="zhipaiSelect" size="normal">確認(rèn)</van-button>
      </div>
      <van-checkbox-group v-model="userAssign" ref="checkboxGroup">
        <van-cell
          v-for="(item, index) in userAssignList"
          clickable
          :key="item"
          :title="` ${item.userName}`"
          @click="toggle(index)"
        >
          <template #right-icon>
            <van-checkbox
              :name="item.userId"
              :ref="el => checkboxRefs[index] = el"
              @click.stop
            />
          </template>
        </van-cell>
      </van-checkbox-group>
    </van-popup>

  </div>
</template>

到了這里，關(guān)于Vant 彈出列表多選 輸入框下拉選擇 (可直接復(fù)制使用)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！