bootstrap select插件封裝成Vue2.0組件
更新時(shí)間：2017年04月17日 10:12:07 作者：vivid_renzaijianghu
這篇文章主要為大家詳細(xì)介紹了bootstrap select插件封裝成Vue2.0組件的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
因?yàn)閎ootstrap-select功能比較強(qiáng)大，而且樣式還不錯(cuò)，所以在項(xiàng)目使用了vue，所以，覺得對(duì)bootstrap-select進(jìn)行封裝。
html
復(fù)制代碼 代碼如下:
<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='請(qǐng)選擇' 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');
}
});
不得不提一下，在使用多個(gè)select的時(shí)候，在刪除某一個(gè)selcet對(duì)象的時(shí)候，加載的值會(huì)發(fā)生改變，糾結(jié)了半天發(fā)現(xiàn)是vue自身的問題：因?yàn)関ue對(duì)象有在重新渲染html的過程中會(huì)復(fù)用原來相同的vue對(duì)象，所以導(dǎo)致會(huì)導(dǎo)致selcet對(duì)象錯(cuò)位。解決方案：將每個(gè)select對(duì)象打上一個(gè)標(biāo)簽key。雖然可能導(dǎo)致性能的下降，但是不會(huì)導(dǎo)致錯(cuò)誤。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
knockoutjs模板實(shí)現(xiàn)樹形結(jié)構(gòu)列表
這篇文章主要介紹了knockoutjs模板實(shí)現(xiàn)樹形結(jié)構(gòu)列表的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-07-07
當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候，不可避免地需要進(jìn)行跨域操作，JSONP跨域GET請(qǐng)求是一個(gè)常用的解決方案，下面我們來看一下JSONP跨域是如何實(shí)現(xiàn)的，并且探討下JSONP跨域的原理。2015-04-04
本篇文章我們研究一下，在移動(dòng)端開發(fā)過程中經(jīng)常使用到的圖片上傳功能，在大多數(shù)小程序或者APP中都會(huì)遇到一些實(shí)名認(rèn)證或者頭像上傳的功能，對(duì)uniapp小程序?上傳圖片功能感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript封裝彈框插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
bootstrap fileinput完整實(shí)例分享
這篇文章主要為大家分享文件上傳組件bootstrap fileinput完整實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
JS request函數(shù) 用來獲取url參數(shù)
項(xiàng)目中經(jīng)常會(huì)遇到這種問題 下面代碼解決問題！2010-05-05
重復(fù)提交、重復(fù)刷新、防止后退等等都是屬于系統(tǒng)為避免重復(fù)記錄而需要解決的問題，在客戶端去處理需要針對(duì)每一種的可能提出相應(yīng)的解決方案，然而在服務(wù)器端看來只不過是對(duì)于數(shù)據(jù)真實(shí)性的檢驗(yàn)問題2012-09-09
JavaScript 阻塞方式實(shí)現(xiàn)異步任務(wù)隊(duì)列
本文主要介紹了JavaScript 阻塞方式實(shí)現(xiàn)異步任務(wù)隊(duì)列,主要介紹了兩種方案,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
這篇文章主要介紹了jQuery插件datepicker 日期連續(xù)選擇的方法和示例，有需要的小伙伴可以參考下。2015-06-06
本文主要介紹了JavaScript編寫九九乘法表的兩種方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02