vue下拉列表功能实例代码-tutorial js-php.cn

vue下拉列表功能实例代码

亚连

Lepaskan： 2018-05-26 13:57:01

asal

2016 orang telah melayarinya

这篇文章主要介绍了vue下拉列表功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下

最近在弄作品，做了个下拉列表。心想各位小哥哥、小姐姐可能会用到相同的需求，就把下拉列表封装一下，希望能对各位小哥哥，小姐姐有帮助

github地址：

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

喜欢的请反手来个star，有issue的欢迎提出

安装

cnpm install vue-droplist --save

Salin selepas log masuk

组件中导入

import DropList from &#39;vue-droplist&#39;

// 显示下拉列表
showDropList() {
// 配置信息
const configData = {
position: { // 设置显示位置
top: &#39;&#39;, 
right: &#39;&#39;,
bottom: &#39;&#39;,
left: &#39;&#39;
},
width: &#39;40%&#39;, // 设置宽度
list: [ // 设置下拉列表数据和对应的点击事件
{text: &#39;修改资料&#39;, action: this.updateUserInfo},
{text: &#39;更换主题&#39;, action: this.updateTheme},
{text: &#39;退出账号&#39;, action: this.signOut}
...
],
isShow: true //设置显示，默认false
}
DropList(configData) //执行配置信息
},
updateUserInfo() {
//do something
},
updateTheme() {
//do something
},
signOut() {
//do something
}

Salin selepas log masuk