vue下拉列表

 本身寫了個vue下拉框，但願對各位有幫助

https://github.com/ClmPisces/vue-droplist
github地址，喜歡的請反手來個star,有issue的歡迎提出 

vue-droplist

vue項目的下拉框

介紹

vue-droplist是一款小型的下拉框

使用

安裝

cnpm install vue-droplist --save

組件中導入

import DropList from 'vue-droplist'

註冊組件

components: {

  DropList

}

data裏設置配置信息

data() {

  configData : {

    position: {  // 設置顯示位置，position

      top: '', 

      right: '',

      bottom: '',

      left: ''

    },

    width: '40%', // 設置寬度

    list: [ // 設置下拉列表數據和對應的點擊事件

      {text: '修改資料', action: this.updateUserInfo},

      {text: '更換主題', action: this.updateTheme},

      {text: '退出帳號', action: this.signOut}

      ...

    ]

}

html

    <drop-list :config="configData" ref="droplist"></drop-list>

使用

默認點擊其餘區域和選中列表會自動隱藏，無需手動隱藏

顯示

this.$refs.droplist.show()

隱藏

this.refs.droplist.hidden()

　　

效果圖：