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