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

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. Java过滤XSS脚本, 可通过Appscan扫描

    项目中有时会需要把一些报错或者解决方案直接返回给前端, 如果直接返回原字符串, 可能会被恶意传参来实现xss注入. 例如常规业务访问一个页面读取文件&file=sdf.cpt, 如果文件不存在 ...

  2. 软件质量与测试--第二周作业 WordCount

    github地址: https://github.com/wzfhuster/software_test_tasks psp表格: PSP2.1 PSP 阶段 预估耗时 (分钟) 实际耗时 (分钟) ...

  3. iOS加密算法总结

    常用加密算法: DES:Data Encryption Standard,即数据加密算法,它是IBM公司于1975年研究成功并公开发表的. DES(数据加密标准)原理: DES是一个分组加密算法,它以 ...

  4. jQuery学习笔记之extend方法小结

    在学习jQuery的时候,学习到了$.extend的主要用法,在此做一个简单的总结. (1)当只写一个对象自变量时,拓展的是jQuery的工具方法,如: $.extend({ aaa:function ...

  5. 如何 创建一个model对象保存到LIST集合里面并取出来

    /// <summary> /// 缓存客服集合信息 /// </summary> public class model { /// <summary> /// 客 ...

  6. fail2ban防止SSH暴力破解

    [root@kazihuo /srv]# wget https://github.com/fail2ban/fail2ban/archive/0.8.14.tar.gz [root@kazihuo / ...

  7. Hibernate 一对一关联映射,mappedBy参数解析

    在最近java,SSH框架的学习中遇到了这样的一个问题,在Hibernate的开发中一对一关联映射的单向关联,主表会在次表新增一列次表的主键如下图,但是在双向关联中次表不会在表中创建主表的主键一列,这 ...

  8. EntityFramework Core 运行dotnet ef命令迁移背后本质是什么?(EF Core迁移原理)

    前言 终于踏出第一步探索EF Core原理和本质,过程虽然比较漫长且枯燥乏味还得反复论证,其中滋味自知,EF Core的强大想必不用我再过多废话,有时候我们是否思考过背后到底做了些什么,到底怎么实现的 ...

  9. 【windows】 配置一个本地的tomcat服务器

    配置tomcat 公司的许多业务都是用java+tomcat模式的,做本地测试的时候经常要搭建一个自己的tomcat服务器.整个操作不难,但是记录一下,万一以后遇到什么问题也可以放这里. ■ 安装ja ...

  10. iOS CocoaPods一些特别的用法 指定版本、版本介绍、忽略警告

    简介 介绍一些CocoaPods一些特别的用法 CocoaPods github地址 CocoaPods 官方地址 1. 指定第三方库版本 1. 固定版本 target 'MyApp' do use_ ...