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.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮 单选按钮:单选按钮用
-
Vue.js列表渲染绑定jQuery插件的正确姿势
使用v-for绑定列表时,有时候需要绑定如select2之类的jQuery插件. 需要在Vue根据数组内容生成dom元素之后,去找到该dom元素,然后 $().xxx绑定jQuery插件. 之前使用Vue.nextTick方法,在一次dom更新以后执行延迟回调,渲染jQuery插件. 然而这并不是一种很好的方式,有时候难以确定dom元素更新是否是我们需要关注的那个. 在列表中渲染Jquery插件的正确姿势,是使用自定义指令.自定义指令提供了一些钩子函数,可以准确的监听到dom元素与数据的绑定周期
-
vue.js2.0点击获取自己的属性和jquery方法
如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="dt"> <div id="dongtao"> <span class="nihao" v-for=&qu
-
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表.然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡.当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表. 如果是纯 JS 代码,有人可能会使用
-
vue 1.x 交互实现仿百度下拉列表示例
0.前言 vue 本身不支持交互,想要做交互,必须引入ajax 模块.vue 团队提供一个新的库文件叫做 vue-resource.js . 网络CDN:https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js 1.用法分类 ajax 交互通常分为3类,get,post,jsonp html 部分的代码:数组myData 的数据通过ul 列表显示出来,用"v-for"指令 <body> <div id=&qu
-
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表. 知识点: 组件的写法及运用 组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数据的绑定(v-bind) 自定义事件通信 效果图: 1.未做任何操作前,下拉列表为隐藏状态 2.点击输入框显示下拉列表 3. 点击列表项,输入框值跟随改变 PS: 为了演示data1, data2两组数据的绑定,实例中创建了两个列表 html代码: <!DOCTYPE html> <html
-
vue表单绑定实现多选框和下拉列表的实例
在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: <label>测试多选渲染:</label> <div> <template v-for="item in chks"> <input type="checkbox" name="hobby" :value="item.id" :checked="loopsss
-
jQuery+vue.js实现的多选下拉列表功能示例
本文实例讲述了jQuery+vue.js实现的多选下拉列表功能.分享给大家供大家参考,具体如下: 其实就是实现一个多选下拉列表,然后将选中的选项显示到相应的位置: 因为主要是jQuery选中行为的实现,所以,样式结构就不多说啦,直接贴代码啦: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
-
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p
-
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"
-
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"
随机推荐
- 解决VS2017不能打开stdio.h等文件的问题
- 华为学习文档资料
- 随机获取oracle数据库中的任意一行数据(rownum)示例介绍
- 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口
- asp去除所有的超级链接的两种方法 替换与正则
- Jsp连接Access数据库(不通过建立ODBC数据源的方法)
- C++实现第K顺序统计量的求解方法
- python中使用sys模板和logging模块获取行号和函数名的方法
- 详解spring整合shiro权限管理与数据库设计
- JS实现简易的图片拖拽排序实例代码
- 使用Jquery实现点击文字后变成文本框且可修改
- 使用aspose.word 第三方的插件实现导出word
- jquery选择器原理介绍($()使用方法)
- juery框架写的弹窗效果适合新手
- JavaScript使用cookie实现记住账号密码功能
- js微信支付实现代码
- Tomcat 日志切割(logrotate)详细介绍
- android连接wifi时获取广播地址代码
- THINKPHP截取中文字符串函数实例代码
- three.js实现3D模型展示的示例代码