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 拾漏补遗
Dec 27 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python iter()函数用法实例分析
2018/03/17 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
影视后期实训报告
2014/11/05 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
医院见习总结
2015/06/24 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书