知识汇总09~bootstrap-select在Vue中的封装

在项目中为何选择了bootstrap的bootstrap-select插件，因为相比其他下拉插件，这个插件更成熟，兼容性更好，也容易使用！

如何在Vue中封装成组件：

---

在项目中引入相应的bootstrap，与bootstrap-select的js与css

1、js：组件封装

　　Vue.component('vm-select',{

　　　　props:['options','value'],

　　　　template:"<select class='selectpicker' data-live-search='true' data-live-search-placeholder='搜索'><option :value='option.name' v-for='option in options'>{{option.name}}</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);

　　　　　　　　　　}

　　　　　　　　})

　　　　　　},

　　　　watch:{

　　　　　　　　value(newV,oldV){

　　　　　　　　　　$(this.$el).selectpicker('val',newV);

　　　　　　　　}

　　　　　　},

　　　　updated:function(){

　　　　　　　　this.$nextTick(function(){

　　　　　　　　　　$(this.$el).selectpicker('refresh');

　　　　　　　　})

　　　　　　},

　　　　destroyed:function(){

　　　　　　　　$(this.$el).selectpicker('destroy');

　　　　　　}

　　})

到此，插件已经封装好了~

2、在html中使用 注意：在vue中要使用双向数据绑定，需要使用v-bind:属性，可省略为     :属性

<vm-select :options="appNameSelect"  v-model="item.appName" ref="typeSelect" :disabled="bbool"></vm-select>

　　完成了~

可以根据项目需要，动态修改props参数和下拉菜单的循环数据结构，我的项目是传入的对象数组，所以……

 

转载于:https://www.cnblogs.com/sunshineForFuture/p/9391899.html