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)反手來個(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲完整實(shí)例【附源碼下載】
- 詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
- Vue.js 通過jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁面的方法
- vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法
- Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)
- Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題
- vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例
- Vue.js實(shí)現(xiàn)在下拉列表區(qū)域外點(diǎn)擊即可關(guān)閉下拉列表的功能(自定義下拉列表)
- Vue.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽)
- vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例
- jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能示例
相關(guān)文章
這篇文章主要介紹了Vue Ajax跨域請(qǐng)求實(shí)例詳解,需要的朋友可以參考下2017-06-06
封裝組件相信對(duì)大家來說都不陌生了,下面這篇文章主要給大家介紹了關(guān)于用VUE封裝一個(gè)文本滾動(dòng)組件的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
Vue中計(jì)算屬性和監(jiān)聽屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2023-03-03
在Vue2項(xiàng)目中使用Mock.js的詳細(xì)教程
Mock.js?是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請(qǐng)求的?JavaScript?庫,它非常適合在前端開發(fā)中模擬后端?API,尤其是在前后端分離的開發(fā)模式下,本文給大家介紹了如何在Vue2項(xiàng)目中使用Mock.js,需要的朋友可以參考下2024-10-10
VUE動(dòng)態(tài)生成word的實(shí)現(xiàn)
這篇文章主要介紹了VUE動(dòng)態(tài)生成word的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
html2canvas.js是一款可以在網(wǎng)頁上實(shí)現(xiàn)頁面截圖的js,它使用了html5和css3的一些新功能特性,實(shí)現(xiàn)了在客戶端對(duì)網(wǎng)頁進(jìn)行截圖的功能,這篇文章主要給大家介紹了關(guān)于html2canvas使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue項(xiàng)目搭建過程，使用NPM方式搭建的，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue大屏展示適配，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
本篇文章主要介紹了詳解Vue 事件驅(qū)動(dòng)和依賴追蹤 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04