脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue下拉列表

vue下拉列表功能实例代码

 更新时间：2018年04月08日 08:36:18   作者：一曲笙箫  
这篇文章主要介绍了vue下拉列表功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

github地址：

https://github.com/ClmPisces/vue-droplist

喜欢的请反手来个star，有issue的欢迎提出

安装

cnpm install vue-droplist --save

组件中导入

import DropList from 'vue-droplist'

// 显示下拉列表
showDropList() {
// 配置信息
const configData = {
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 Ajax跨域请求实例详解

    Vue Ajax跨域请求实例详解

    这篇文章主要介绍了Vue Ajax跨域请求实例详解,需要的朋友可以参考下
    2017-06-06
  • 手把手教你用VUE封装一个文本滚动组件

    手把手教你用VUE封装一个文本滚动组件

    封装组件相信对大家来说都不陌生了,下面这篇文章主要给大家介绍了关于用VUE封装一个文本滚动组件的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解

    Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2023-03-03
  • 在Vue2项目中使用Mock.js的详细教程

    在Vue2项目中使用Mock.js的详细教程

    Mock.js 是一个用于生成随机数据和拦截 Ajax 请求的 JavaScript 库,它非常适合在前端开发中模拟后端 API,尤其是在前后端分离的开发模式下,本文给大家介绍了如何在Vue2项目中使用Mock.js,需要的朋友可以参考下
    2024-10-10
  • VUE动态生成word的实现

    VUE动态生成word的实现

    这篇文章主要介绍了VUE动态生成word的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • html2canvas使用文档(vue举例)

    html2canvas使用文档(vue举例)

    html2canvas.js是一款可以在网页上实现页面截图的js,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能,这篇文章主要给大家介绍了关于html2canvas使用的相关资料,需要的朋友可以参考下
    2024-03-03
  • Vue使用NPM方式搭建项目

    Vue使用NPM方式搭建项目

    这篇文章主要介绍了Vue项目搭建过程，使用NPM方式搭建的，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • Vue router 路由守卫详解

    Vue router 路由守卫详解

    这篇文章主要为大家介绍了Vue router 路由守卫，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • vue大屏展示适配的方法

    vue大屏展示适配的方法

    这篇文章主要为大家详细介绍了vue大屏展示适配，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解Vue 事件驱动和依赖追踪

    详解Vue 事件驱动和依赖追踪

    本篇文章主要介绍了详解Vue 事件驱动和依赖追踪 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论