Select2

摘要:vue select2 搜索 多选

Select2

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

封装vue

/* select2封装*/
Vue.directive('select2', {
    inserted: function (el, binding, vnode) {
        let options = binding.value || {};
        $(el).select2(options).on("select2:select", (e) => {
            // v-model looks for
            // - an event named "change"
            // - a value with property path "$event.target.value"
            el.dispatchEvent(new Event('change', {target: e.target})); 
    });
},
update: function (el, binding, vnode) {
    for (var i = 0; i < vnode.data.directives.length; i++) {
        if (vnode.data.directives[i].name == "model") {
            $(el).val(vnode.data.directives[i].value); 
        }
    }
    $(el).trigger("change"); 
}
});

使用

                            <select class="form-control select" v-select2="" v-model="OtherUsers" multiple="multiple">
                                  <template v-for="User in UserLists">
                                     <option :value="User.Id">{{ User.DisplayName }}</option>
                                  </template>
                            </select>
其中如果去除 multiple="multiple" 就会变成搜索框的,添加上就是多选的

更改选则的数据的标签样式

<style type="text/css">
    .select2-selection__choice{
        background-color:#367fa9!important;
        border:#367fa9!important;
        padding: 1px 10px!important;
        color: #fff!important;
    }
    .select2-selection__choice__remove{
        color: rgba(255,255,255,0.7)!important;
    }
</style>

IE下使用不兼容

效果可以出来,但是数据不行,会是空的,此时使用JQ将数据手动赋给对应的参数即可
$('#oceania_multi').val();
这样还会有问题,选择其他的input也会然多选框出问题,一下是处理后的版本
/* select2封装*/
Vue.directive('select2', {
    inserted: function (el, binding, vnode) {
        var options = binding.value || {};
        //$(el).select2(options).on("select2:select", (e) => {
            //el.dispatchEvent(new Event('change', {target: e.target}));   //双向绑定操作,其中在火狐 谷歌中可以正常使用在IE中无法实现自动的绑定,需要后续进行手动绑定数据操作
        //});
        $(el).select2(options).on("select2:select", function (e) { });
    },
    //以下请勿删除(防止IE下出现问题无法还原)
    //update: function (el, binding, vnode) {
        //for (var i = 0; i < vnode.data.directives.length; i++) {
            //console.log(vnode.data.directives[i].name);
            //if (vnode.data.directives[i].name == "select2") {
            //    $(el).val(vnode.data.directives[i].value); 
            //    console.log(vnode.data.directives[i].value);
            //}
        //}
        //$(el).trigger("change"); 
    //}
});
            var defaultStringData = $('.select2-selection__rendered').text();
            var defaultStringArr = defaultStringData.split('×');
            var formatStringData = defaultStringArr.join(',');
            this.AllReasonStr = formatStringData.replace(/^(\s|,)+|(\s|,)+$/g, '');
直接去获取div中的数据,然后进行操作,不使用双向绑定
评论