vue下拉列表功能實(shí)例代碼

更新時(shí)間：2018年04月08日 08:36:18 作者：一曲笙簫

這篇文章主要介紹了vue下拉列表功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

最近在弄作品，做了個(gè)下拉列表。心想各位小哥哥、小姐姐可能會(huì)用到相同的需求，就把下拉列表封裝一下，希望能對(duì)各位小哥哥，小姐姐有幫助

github地址：

https://github.com/ClmPisces/vue-droplist

喜歡的請(qǐng)反手來(lái)個(gè)star，有issue的歡迎提出

安裝

cnpm install vue-droplist --save

組件中導(dǎo)入

import DropList from 'vue-droplist'

// 顯示下拉列表
showDropList() {
// 配置信息
const configData = {
position: { // 設(shè)置顯示位置
top: '', 
right: '',
bottom: '',
left: ''
},
width: '40%', // 設(shè)置寬度
list: [ // 設(shè)置下拉列表數(shù)據(jù)和對(duì)應(yīng)的點(diǎn)擊事件
{text: '修改資料', action: this.updateUserInfo},
{text: '更換主題', action: this.updateTheme},
{text: '退出賬號(hào)', action: this.signOut}
...
],
isShow: true //設(shè)置顯示，默認(rèn)false
}
DropList(configData) //執(zhí)行配置信息
},
updateUserInfo() {
//do something
},
updateTheme() {
//do something
},
signOut() {
//do something
}

總結(jié)

以上所述是小編給大家介紹的vue下拉列表功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法
這篇文章主要介紹了vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法，需要的朋友可以參考一下
2019-12-12
關(guān)于eslint和prettier格式化沖突問(wèn)題
這篇文章主要介紹了eslint和prettier格式化沖突問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-08-08
Vue解決跨域問(wèn)題常見(jiàn)方法詳解
這篇文章主要介紹了Vue解決跨域問(wèn)題常見(jiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue出現(xiàn)跨域問(wèn)題的原因,以及常見(jiàn)解決方案與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2023-06-06
IOS上微信小程序密碼框光標(biāo)離開(kāi)提示存儲(chǔ)密碼的完美解決方案
ios密碼框輸入密碼光標(biāo)離開(kāi)之后會(huì)提示存儲(chǔ)密碼的彈窗,關(guān)于這樣的問(wèn)題怎么解決呢,下面給大家分享IOS上微信小程序密碼框光標(biāo)離開(kāi)提示存儲(chǔ)密碼的完美解決方案,感興趣的朋友一起看看吧
2024-07-07
vue前端更新后需要清空緩存代碼示例
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-10-10
Vue3+TypeScript+printjs實(shí)現(xiàn)標(biāo)簽批量打印功能的完整過(guò)程
最近在做vue項(xiàng)目時(shí)使用到了print-js打印,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于Vue3+TypeScript+printjs實(shí)現(xiàn)標(biāo)簽批量打印功能的完整過(guò)程,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
如何使用Vue mapState快捷獲取Vuex state多個(gè)值
這篇文章主要為大家介紹了如何使用Vue mapState快捷獲取Vuex state多個(gè)值實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
詳解關(guān)于Vue版本不匹配問(wèn)題(Vue packages version mismatch)
這篇文章主要介紹了詳解關(guān)于Vue版本不匹配問(wèn)題(Vue packages version mismatch)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明
這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue2.x版詳解computed和watch的使用
這篇文章主要介紹了vue2.x版詳解computed和watch的使用，文章在基于vue框架的前端項(xiàng)目開(kāi)發(fā)過(guò)程中，只要涉及到稍微復(fù)雜一點(diǎn)的業(yè)務(wù)，我們都會(huì)用到computed計(jì)算屬性這個(gè)鉤子函數(shù)，可以用于一些狀態(tài)的結(jié)合處理和緩存的操作
2022-07-07