vue 不使用select實現下拉框功能(推薦)
html部分:v-for循環(huán)出的結構
<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 }; }, //實現點擊哪個下拉框顯示 clickSize (item, index) { this.i = index; this.isShowSize = !this.isShowSize; }, //實現選取下拉值 getSize (item, item1) { this.item.name = item1.AttrValueName; this.isShowSize = !this.isShowSize; },
下面看下vue--select組件的使用與禁用
業(yè)務:消息推送方式有兩種,為“微信”和“郵件”,微信發(fā)送時需要選擇“要發(fā)送的應用程序”,郵件發(fā)送時不需要
微信發(fā)送時,頁面如下:
郵件發(fā)送時,選擇器不可用,頁面如下:
雖然官網上沒有給出具體的例子,但可從屬性中查到 “disabled”屬性,
屬性 | 說明 | 類型 | 默認值 |
---|---|---|---|
disabled | 是否禁用 | Boolean | false |
實現:
添加disabled屬性,寫成如下紅色標記格式;定義一個isAble變量,用來存放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方法中只寫了判斷不可用,改回微信時,還要變成可用狀態(tài),不然又埋了個bug,哈哈。不過這是業(yè)務邏輯了,只介紹方法,記個筆記,具體視情況而定。
以上所述是小編給大家介紹的vue 不使用select實現下拉框功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
詳解使用element-ui table組件的篩選功能的一個小坑
在element ui 框架中,對于table框架,有一個篩選功能,這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個小坑,非常具有實用價值,需要的朋友可以參考下2018-11-11Vue.js axios響應攔截如何獲取返回狀態(tài)碼
這篇文章主要介紹了Vue.js axios響應攔截如何獲取返回狀態(tài)碼問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01