vue下拉列表

时间 2019-11-11

标签 vue 下拉列表繁體版

原文原文链接

本身写了个vue下拉框，但愿对各位有帮助

https://github.com/ClmPisces/vue-droplist
github地址，喜欢的请反手来个star,有issue的欢迎提出

vue-droplist

vue项目的下拉框html

介绍

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

使用

安装

cnpm install vue-droplist --savegit

组件中导入

import DropList from 'vue-droplist'github

注册组件

 
   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> 
  

使用

默认点击其余区域和选中列表会自动隐藏，无需手动隐藏npm

显示

this.$refs.droplist.show()

隐藏

this.refs.droplist.hidden()

效果图：curl