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

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. shell 脚本下执行Mongodb命令

    最近项目中搭建了两台mongodb的服务器,由于服务器只有两台的情况下,目前只是搭建了主从模式架构(官方目前并不推荐主从模式),缺点就是故障转移不变等等原因,而是推荐副本集模式(这里就不多说了)... ...

  2. Web项目生成详解

    action 与用户控制层相关内容,来自用户的请求和页面跳转: dao 数据库进行增删改查操作,接口定义其中: dao.impl 将上述接口进行实现 domain 数据表都映射成java中的类,实现数 ...

  3. STM32F10x的启动汇编分析

    ;******************** (C) COPYRIGHT 2009 STMicroelectronics ********************;* File Name         ...

  4. 深入java虚拟机学习 -- 类的加载机制(三)

    类的初始化时机 在上篇文章中讲到了类的六种主动使用方式,反射是其中的一种(Class.forName("com.jack.test")),这里需要注意一点:当调用ClasLoade ...

  5. vue-cli工具搭建vue-webpack项目

    1.安装node环境 下载地址 https://nodejs.org/en/download/ node -v   安装成功后在命令行查看node版本 npm-v   安装成功后在命令行查看npm版本 ...

  6. install-scp

    centos6 minilize system will not scp command install: yum -y install openssh-clients and another mac ...

  7. c++趣味之难以发现的bug

    这些bug可能够你喝一壶的. 1.被断言(assert)包含的代码 常发生在切换到release版本时,执行结果乖乖的,最终查找结果是assert括号里的代码在release下是不执行的. 发现:跟踪 ...

  8. sklearn包中有哪些数据集你都知道吗?

    注册了博客园一晃有3个月了,同时接触机器学习也断断续续的算是有1个月了.今天就用机器学习神器sklearn包的相关内容作为我的开篇文章吧. 本文将对sklearn包中的数据集做一个系统介绍,并简单说一 ...

  9. 【Python】 MySQLdb的安装与使用

    MySQLdb MySQLdb是一款较为底层的,python连接mysql用的模块.和更加高级的,提供ORM的模块不同,MySQLdb主要还是聚焦于如何和数据库进行连接和进行基本的操作,操作的体现形式 ...

  10. 【Python】 http客户端库requests & urllib2 以及ip地址处理IPy

    requests requests是个HTTPClient库,相比于urllib,urllib2等模块比更加简洁易用 ■ get请求 作为示例,讲一下关于requests如何发起并处理一个get请求 ...