vue 不使用select實(shí)現(xiàn)下拉框功能(推薦)
html部分：v-for循環(huán)出的結(jié)構(gòu)
<div >
<p @click="clickSize (item, index)">{{item.name}}</p>
<transition name="opacityLeave">
<div class="condition-list" v-show="isShowSize && index == i">
<div class="size-wrap" v-if="item.RingSize">
<p class="size" :class="{'active':item1.active}" :key="index1" v-for="(item1, index1) in item.RingSize" @click="getSize (item, item1) ">{{item1.AttrValueName}}</p>
</div>
</div>
</transition>
</div>
js部分：
data() {
return {
isShowSize: false,
i: -1
};
},
//實(shí)現(xiàn)點(diǎn)擊哪個(gè)下拉框顯示
clickSize (item, index) {
this.i = index;
this.isShowSize = !this.isShowSize;
},
//實(shí)現(xiàn)選取下拉值
getSize (item, item1) {
this.item.name = item1.AttrValueName;
this.isShowSize = !this.isShowSize;
},
下面看下vue--select組件的使用與禁用
業(yè)務(wù)：消息推送方式有兩種，為“微信”和“郵件”，微信發(fā)送時(shí)需要選擇“要發(fā)送的應(yīng)用程序”，郵件發(fā)送時(shí)不需要
微信發(fā)送時(shí)，頁(yè)面如下：
郵件發(fā)送時(shí)，選擇器不可用，頁(yè)面如下：
雖然官網(wǎng)上沒有給出具體的例子，但可從屬性中查到 “disabled”屬性，
| 屬性 | 說(shuō)明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| disabled | 是否禁用 | Boolean | false |
實(shí)現(xiàn)：
添加disabled屬性，寫成如下紅色標(biāo)記格式；定義一個(gè)isAble變量，用來(lái)存放TRUE和FALSE值，決定此選擇框是否可用。
<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px">
<Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option>
</Select>
export default {
data(){
return{
isAble: false,//select下拉框是否可用
}
}
然后就是邏輯中操作變量isAble的值，改變組件的可用禁用狀態(tài)了
methods:{
Test(){
var vm = this;
if (vm.alertType == '郵件') {
vm.isAble = true; //不可用
}
}
}
test方法中只寫了判斷不可用，改回微信時(shí)，還要變成可用狀態(tài)，不然又埋了個(gè)bug，哈哈。不過(guò)這是業(yè)務(wù)邏輯了，只介紹方法，記個(gè)筆記，具體視情況而定。
以上所述是小編給大家介紹的vue 不使用select實(shí)現(xiàn)下拉框功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實(shí)現(xiàn)前端分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
詳解使用element-ui table組件的篩選功能的一個(gè)小坑
在element ui 框架中，對(duì)于table框架，有一個(gè)篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個(gè)小坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步
這篇文章主要為大家詳細(xì)介紹了Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue 解決mintui彈窗彈起來(lái),底部頁(yè)面滾動(dòng)bug問(wèn)題
這篇文章主要介紹了vue 解決mintui彈窗彈起來(lái),底部頁(yè)面滾動(dòng)bug問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue 中引用gojs繪制E-R圖的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
實(shí)現(xiàn)一個(gè)Vue版Upload組件
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Vue版Upload組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼
這篇文章主要介紹了Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue3過(guò)渡動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
之前文章我們描述給過(guò)Vue3 的七通信使用，今天中五篇文章我們?cè)賮?lái)看看Vue2 的通信使用寫法的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09