vue下拉列表
最近在弄作品,做了个下拉列表。心想各位小哥哥、小姐姐可能会用到相同的需求,就把下拉列表封装一下,希望能对各位小哥哥,小姐姐有帮助
github地址:
https://github.com/ClmPisces/vue-droplist
安装
cnpm install vue-droplist --save
组件中导入
import DropList from 'vue-droplist'
// 显示下拉列表
showDropList() {
// 配置信息
const configData = {
position: { // 设置显示位置,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下拉列表的更多相关文章
- Vue 下拉列表 组件模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue 下拉列表动画
点击可以收起,这里注意先给需要收起展开的的容器设置高度,通过样式v-enter和v-leave-to设置结束和开始前的就可以了
- Vue 表格里的下拉列表
下拉列表column-select.vue组件内容: <template> <div class="column-select-wrapper"> < ...
- Vue.js之下拉列表及选中触发事件
老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...
- VUE element-ui下拉列表获取label值
有这样一个场景,当我们往后台数据传的是id时,我们却想在前台获取列表显示的值,这时候可以用下面的方法来获取你想要的label值 let obj = {}; obj = this.arr.find((i ...
- 解决vue与传统jquery插件冲突
比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...
- vue+webpack项目实战
概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...
随机推荐
- ------ Tor(洋葱路由器)匿名网络源码分析——主程序入口点(一)------
--------------------------------------------------------<概览> tor 的源码包可以从官网下载,可能需要预先利用其它FQ软件才能访 ...
- CLOB型转成字符型
//oracle.sql.Clob类型转换成String类型 public static String ClobToString(Clob clob) { String reString = &quo ...
- 洛谷 P1564 膜拜
题目出处 s[i]表示前i个人对神牛的膜拜情况,如果膜拜神牛甲则s[i]=s[i-1]+1否则s[i]=s[i-1]-1.那么如果|s[i]-s[j]|<=m或者=i-j+1(也就是人数差不超过 ...
- 大数据Hadoop与Spark学习经验谈
昨晚听了下Hulu大数据基础架构组负责人–董西成的关于大数据学习方法的直播,挺有收获的,下面截取一些PPT的关键内容,希望对正在学习大数据的人有帮助. 现状是目前存在的问题,比如找百度.查书这种学习方 ...
- CentOS7.4安装MySQL踩坑记录
CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...
- f.lux——自动调整屏幕色温减少眼睛疲劳,长时间玩电脑必备!
长时间玩电脑的同学肯定会觉得眼睛很难受,而电脑自带的调节亮度的功能通常又不能够满足我们,所以今天就给大家推荐一个保护视力的软件—— flux,这个软件是通过调节色温来达到保护视力的作用,通常在台式机的 ...
- 理解C语言中几个常见修饰符
写在前面 今天下午一个同事问「register」关键字是什么作用?噢,你说的是「register」啊,它的作用是……脑袋突然断片儿,我擦,啥意思来着,这么熟悉的陌生感.做C语言开发时间也不短了,不过好 ...
- LNMP+FARM+DNS
LNMP 1.安装Nginx前的环境. # yum -y install gcc gcc-c++ pcre-devel zlib-devel openssl-devel 2.添加www系统用户,在 ...
- js工具函数《转载收藏》
1.等待所有图片加载 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var imgObjs = [], count = 0; rotate.prize ...
- 51ak带你看MYSQL5.7源码1:main入口函数
从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译 ...