vue 不使用select實現(xiàn)下拉框功能(推薦)
更新時間：2018年05月17日 11:48:56 作者：github_39598787
這篇文章主要介紹了vue 不使用select實現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下
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
};
},
//實現(xiàn)點擊哪個下拉框顯示
clickSize (item, index) {
this.i = index;
this.isShowSize = !this.isShowSize;
},
//實現(xiàn)選取下拉值
getSize (item, item1) {
this.item.name = item1.AttrValueName;
this.isShowSize = !this.isShowSize;
},
下面看下vue--select組件的使用與禁用
業(yè)務(wù)：消息推送方式有兩種，為“微信”和“郵件”，微信發(fā)送時需要選擇“要發(fā)送的應(yīng)用程序”，郵件發(fā)送時不需要
微信發(fā)送時，頁面如下：
郵件發(fā)送時，選擇器不可用，頁面如下：
雖然官網(wǎng)上沒有給出具體的例子，但可從屬性中查到 “disabled”屬性，
| 屬性 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| disabled | 是否禁用 | Boolean | false |
實現(xiàn)：
添加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è)務(wù)邏輯了，只介紹方法，記個筆記，具體視情況而定。
以上所述是小編給大家介紹的vue 不使用select實現(xiàn)下拉框功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當(dāng)于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
自從體驗了一下vite之后,真的太快了,然而對vue3還不是很熟練,就想著在vue2的項目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項目的相關(guān)資料,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue配置多頁面的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點遠,需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue和iview實現(xiàn)Scroll 數(shù)據(jù)無限滾動功能
今天小編就為大家分享一篇vue和iview實現(xiàn)Scroll 數(shù)據(jù)無限滾動功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue父子組件間引用之$parent、$children的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
Vue 中v-model的完整用法及v-model的實現(xiàn)原理解析
這篇文章詳細介紹了Vue.js中的v-model指令的使用,包括基本用法、原理、結(jié)合不同類型的表單元素（如radio、checkbox、select）以及使用修飾符（如lazy、number、trim）等,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部兩種類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
這篇文章主要給大家介紹了關(guān)于如何利用vue實現(xiàn)波譜擬合的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
今天小編就為大家分享一篇vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08