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

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支付宝开发-01-沙箱环境接入

    一.沙箱环境说明 (1)蚂蚁沙箱环境(Beta)是协助开发者进行接口功能开发及主要功能联调的辅助环境.沙箱环境模拟了开放平台部分产品的主要功能和主要逻辑(当前沙箱支持产品请参考“沙箱支持产品列表”). ...

  2. 组Json以及拆分Json

    例子: 组Json串: procedure TForm8.Button4Click(Sender: TObject); var i: Integer; jfields, jitems, jo: ISu ...

  3. The program 'yum' is currently not installed. You can install it by typing:

    执行:(可以直接写成sudo su,就直接转成root了) sudo apt-get updateapt-get install lrzsz 出现:The program 'yum' is curre ...

  4. flask项目部署到阿里云 ubuntu16.04

    title: flask项目部署到阿里云 ubuntu16.04 date: 2018.3.6 项目地址: 我的博客 部署思路参考: Flask Web开发>的个人部署版本,包含学习笔记. 开始 ...

  5. C#程序入门学习

    前言: C# (C sharp) 是微软对这一问题的解决方案.C#是一种最新的.面向对象的编程语言.它使得程序员可以快速地编写各种基于Microsoft .NET平台的应用程序,Microsoft . ...

  6. wifislax中的linset软件钓鱼教程

    wifislax中很多破解wifi密码的工具,下面就来说说里面的linset软件的钓鱼过程,国内很多人知道这个方法,不过没有总结,youtube上视频一大把,我刚才测试了一把,还是打算记录一下攻击过程 ...

  7. WordPress禁止版本修订历史、自动保存和自动草稿最新方法汇总

    提醒:我这里汇总的方法有一些只支持以前老版本的WordPress,对于新版本的WordPress,有些功能是不支持的,所以操作前请做好备份.我的WordPress版本目前是4.3.1,我会在我测试有效 ...

  8. docker学习系列(五):使用docker创建集成服务--lnmp

    在掌握了docker的基本命令之后,我也是想着去用docker做一点实际的配套环境,就拿自己最常用的lnmp环境来做测试.配套环境运行的顺序依次是mysql->php->nginx,至于为 ...

  9. 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)

    如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...

  10. 使用localStorage保存搜索记录

    //过滤一个结果的空记录添加,过滤空搜索 默认保存10条记录,自己可修改 function setHistoryItems(keyword) { keyword = keyword.replace(& ...