vue下拉列表功能实例代码

更新时间：2018年04月08日 08:36:18 作者：一曲笙箫

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

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

github地址：

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

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

安装

cnpm install vue-droplist --save

组件中导入

import DropList from 'vue-droplist'

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

总结

以上所述是小编给大家介绍的vue下拉列表功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

利用angular、react和vue实现相同的面试题组件
eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2018-02-02
vue与bootstrap实现简单用户信息添加删除功能
这篇文章主要为大家详细介绍了vue与bootstrap实现简单用户信息添加删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
Vue模拟响应式原理底层代码实现的示例
最近去面试的人都会有这个体会,去年面试官只问我怎么用vue,今年开始问我vue响应式原理，本文就详细的介绍一下
2021-08-08
Vue 按键修饰符处理事件的方法
这篇文章主要介绍了Vue 按键修饰符的相关资料，vue中新增按键修饰符和系统修饰符来处理类似的事件，具体内容详情大家参考下本文
2018-05-05
Vue项目配置@别名全过程
这篇文章主要介绍了Vue项目配置@别名全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
使用FileReader API创建Vue文件阅读器组件
这篇文章主要介绍了使用FileReader API创建一个Vue的文件阅读器组件,需要的朋友可以参考下
2018-04-04
解决vue scoped scss 无效的问题
这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
vue使用v-for实现hover点击效果
hover是css中的选择器，用于选择鼠标指针浮动在上面的元素。这篇文章主要介绍了vue使用v-for实现hover点击效果,需要的朋友可以参考下
2018-09-09
vue项目内存溢出问题及解决方案
这篇文章主要介绍了vue项目内存溢出问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01