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之旅 对象的原型链之由来
Aug 25 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
Javascript实现关闭广告效果
Jan 29 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
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
js中的string.format函数代码
2020/08/11 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python计算时间差的方法
2015/05/20 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python timeit模块原理及使用方法
2020/10/10 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
美国创意之家:BulbHead
2017/07/12 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
超越自我演讲稿
2014/05/21 职场文书
销售人员求职信
2014/07/22 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2014年平安夜寄语
2014/12/08 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
通知怎么写?
2019/04/17 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技