bootstrap select插件封装成Vue2.0组件


Posted in Javascript onApril 17, 2017

因为bootstrap-select功能比较强大,而且样式还不错,所以在项目使用了vue,所以,觉得对bootstrap-select进行封装。

html

<my-select :options="input.options" v-model="input.value" ref="typeSelect" :index="index" :childidx="childIdx" :load="load" :multiple="input.multiple" :method="change"></my-select>

js

// select 插件
Vue.component('vm-select', {
 props : ['options', 'value', 'multiple', 'method', 'load', 'index', 'childidx'],
 template : "<select :multiple='multiple' class='selectpicker' data-live-search='true' title='请选择' data-live-search-placeholder='搜索'><option :value='option.value' v-for='option in options'>{{ option.label }}</option></select>",
 mounted : function () {
 var vm = this;
 $(this.$el).selectpicker('val', this.value != null ? this.value : null);
 $(this.$el).on('changed.bs.select', function () {
 vm.$emit('input', $(this).val());
 if (typeof(vm.method) != 'undefined') {
 vm.method(vm.index, vm.childidx, this.value);
 }
 });
 $(this.$el).on('show.bs.select', function () {
 if (typeof(vm.load) != 'undefined') {
 vm.load(vm.index, vm.childidx);
 }
 });
 },
 updated : function () {
 $(this.$el).selectpicker('refresh');
 },
 destroyed : function () {
 $(this.$el).selectpicker('destroy');
 }
});

不得不提一下,在使用多个select的时候,在删除某一个selcet对象的时候,加载的值会发生改变,纠结了半天发现是vue自身的问题:因为vue对象有在重新渲染html的过程中会复用原来相同的vue对象,所以导致会导致selcet对象错位。解决方案:将每个select对象打上一个标签key。虽然可能导致性能的下降,但是不会导致错误。

bootstrap select插件封装成Vue2.0组件

vue官网

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
解析vue中的$mount
Dec 21 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 #Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 #Javascript
react.js CMS 删除功能的实现方法
Apr 17 #Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 #Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 #Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
Vue分页组件实例代码
Apr 17 #Javascript
You might like
php下过滤HTML代码的函数
2007/12/10 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
会计助理岗位职责
2014/02/17 职场文书
妇女干部培训方案
2014/05/12 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
创业计划书之酒店
2019/08/30 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL