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 $ ...
随机推荐
- POJ - 2828
题意 输入队伍长度n 接下来n行,a,b 表示b插在队伍的a处 求队伍最后的情况 题解 刚开始并不知道要用线段树,经大佬点悟,发现最后插入的位置就是对应的a.所以可以从后往前依次插入,每次的位置pos ...
- sdk安装
转自:https://www.cnblogs.com/smyhvae/p/4390905.html 安装sdk:(包解压到哪里就是sdk的安装目录 P.S.安装目录不能有空格,要是之前有空格换了目 ...
- Android中Activity.this,getApplicationContext(),getBaseContext()和this详解
转自:http://android.tgbus.com/Android/tutorial/201103/346236.shtml 在使用Android上下文参数的时候经常分不清Activity.thi ...
- 杭电oj-1000-A+B
Problem Description Calculate A + B. Input Each line will contain two integers A and B. Process to e ...
- 设计模式——抽象工厂模式(C++实现)
#include <iostream> #include <string> using namespace std; class STAbstractProductA { pu ...
- openstack的最简单安装
环境:采用centos7.4,最低4g内存.大硬盘.内存小了会在安装过程中报错.整个过程大概2小时,看网速快慢,所有的节点和服务都安装在同一台机器上. yum update -y yum inst ...
- 剑指Offer-链表中环的入口结点
package LinkedList; import java.util.HashSet; /** * 链表中环的入口结点 * 一个链表中包含环,请找出该链表的环的入口结点. */ public cl ...
- 框架开发之——AngularJS+MVC+Routing开发步骤总结——5.14
1.延续MVC的观念:包括路由映射的编写,Controller的内容,具体View页面js的分离. 2.结合AngularJS做前端,后端使用Node.Js的写法,引入MVC框架,进行快速的开发. 步 ...
- Hibernate 介绍及其 环境搭建
介绍 数据持久化概念 数据持久化是将内存中的数据模型转换为存储模型,以及将存储模型转换为内存中的数据模型的统称.例如:文件的存储.数据的读取等都是数据持久化操作.数据模型可以是任何数据结构或对象模型, ...
- ASCII十进制转字符串的方法
/// <summary> /// ASCII转字符串 /// </summary> /// <param name="asciiCode">A ...