1.0.6 • Published 6 years ago
vue-droplist v1.0.6
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()