前言：
為了實(shí)現(xiàn)和pc端一樣的下拉選擇組件，目前插件市場(chǎng)上也沒有相關(guān)組件，所以單獨(dú)封裝，以供大家學(xué)習(xí)參考
參數(shù)
| 參數(shù) | 解釋 | 默認(rèn) |
|---|---|---|
| multiple | 是否多選 | false |
| list | 傳入選擇的數(shù)據(jù)列表 | [] |
| label-key | 數(shù)據(jù)列表的展示字段 | 'label' |
| value-key | 數(shù)據(jù)列表的值 | "value" |
| title | 窗口標(biāo)題 | '選擇內(nèi)容' |
| placeholder | 輸入框提示文字 | '請(qǐng)輸入' |
| clearable | 輸入框是否顯示可以清空按鈕 | false |
| @confirm | 確認(rèn)按鈕的回調(diào)方法 | 必傳 |
| @change | 單選的時(shí)候回調(diào)方法 | 單選必傳 |
單選用法
<!-- 單選 -->
<ls-selectAlterWindow ref="singleSelctedRef" :multiple="false" :list="transferUserList" label-key="label"
value-key="value" placeholder="請(qǐng)輸入進(jìn)行檢索" title="單選" clearable v-model="selectInfo.transferUserList"
@confirm="singleconfrom" @change="singleChange"></ls-selectAlterWindow>
//js
singleClick() {
this.$refs.singleSelctedRef.isShowModal = true;
},
singleconfrom(item) {
this.selectInfo.transferUserListName = '';
this.selectInfo.transferUserList = '';
},
singleChange(item) {
if (item) {
this.selectInfo.transferUserListName = item.label
} else {
this.selectInfo.transferUserListName = ""
}
},
多選用法
<!-- 多選 -->
<ls-selectAlterWindow ref="morelistRef1" :multiple="true" :list="morelist" label-key="label"
value-key="value" placeholder="請(qǐng)輸入搜索" title="多選" clearable v-model="moreInfo.qySignUser"
@confirm="moreChange"></ls-selectAlterWindow>
moreClick(){
this.$refs.morelistRef1.isShowModal = true;
},
moreChange(item) {
this.moreInfo.qySignUserName = item ? item : [];
this.$forceUpdate()
},
最后：
附上插件市場(chǎng)地址：https://ext.dcloud.net.cn/plugin?name=ls-selectAlterWindow
