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

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下拉列表的更多相关文章

  1. Vue 下拉列表 组件模板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. vue 下拉列表动画

    点击可以收起,这里注意先给需要收起展开的的容器设置高度,通过样式v-enter和v-leave-to设置结束和开始前的就可以了

  3. Vue 表格里的下拉列表

    下拉列表column-select.vue组件内容: <template> <div class="column-select-wrapper"> < ...

  4. Vue.js之下拉列表及选中触发事件

    老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...

  5. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. Ant Design Vue select下拉列表设置默认值

    在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...

  7. VUE element-ui下拉列表获取label值

    有这样一个场景,当我们往后台数据传的是id时,我们却想在前台获取列表显示的值,这时候可以用下面的方法来获取你想要的label值 let obj = {}; obj = this.arr.find((i ...

  8. 解决vue与传统jquery插件冲突

    比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...

  9. vue+webpack项目实战

    概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...

随机推荐

  1. [Luogu3377]【模板】左偏树(可并堆)

    题面戳我 题目描述 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或第y个数已经被删除或第x和第y个数 ...

  2. 【noip模拟】最小点覆盖

    Time Limit: 1000ms      Memory Limit: 128MB Description 最小点覆盖是指在二分图中,用最小的点集覆盖所有的边.当然,一个二分图的最小点覆盖可能有很 ...

  3. SVN提示图标详解

    常见SVN图标的含义  灰色向右箭头:本地修改过 蓝色向左箭头:SVN上修改过 灰色向右且中间有个加号的箭头:本地比SVN上多出的文件 蓝色向左且中间有个加号的箭头:SVN上比本地多出的文件 灰色向右 ...

  4. Hadoop体系架构简介

    今天跟一个朋友在讨论hadoop体系架构,从当下流行的Hadoop+HDFS+MapReduce+Hbase+Pig+Hive+Spark+Storm开始一直讲到HDFS的底层实现,MapReduce ...

  5. kafka集群参数解析server.properties

    #server.properties配置文件 broker.id=1 port=9092 host.name=url1 zookeeper.connect=url1:2181,url2:2181,ur ...

  6. UWP 使用Telerik Chart控件

    Telerik开发的chart功能异常强大 用户可以自行在商店搜索"UI for uwp demos". 下面我就结合以下我的软件,来说明一下饼状图的实现. 看看效果: 先看一下X ...

  7. SpringtMVC运行流程:@RequestMapping 方法中的 Map、HttpServletRequest等参数信息是如何封装和传递的(源码理解)

    在平时开发SpringtMVC程序时,在Controller的方法上,通常会传入如Map.HttpServletRequest类型的参数,并且可以方便地向里面添加数据.同时,在Jsp中还可以直接使用r ...

  8. conda下载速度慢——添加源

    清华提供的anaconda镜像,使用以后真的很快!尤其在学校龟速的网络环境里提速非常明显. https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ TU ...

  9. 使用TensorFlow实现回归预测

    这一节使用TF搭建一个简单的神经网络用于回归预测,首先随机生成一组数据 import tensorflow as tf import numpy as np import matplotlib.pyp ...

  10. Docker自动化部署方案

    一 概述 Docker发布版本应该与现有的版本发布尽量一致,参考jenkins的版本发布过程:我认为maven库和docker库有很多类似的地方,因此打包过程参考maven的打包过程:重点实现dock ...