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 相关文章推荐
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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分析
2011/05/02 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详谈python read readline readlines的区别
2017/09/22 Python
python实现屏保计时器的示例代码
2018/08/08 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python修改文件内容的3种方法详解
2019/11/15 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
python math模块的基本使用教程
2021/01/16 Python
python编程的核心知识点总结
2021/02/08 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android