Vue 自定义组件-select2组件

github: https://github.com/select2/select2

代码:

Vue.component('select2Component',{
        template:'<select  class="select21"  multiple>\n' +
            '\n' +
            '            <option value="1">user_1</option>\n' +
            '            <option value="2">user_2</option>\n' +
            '            <option value="3">user_3</option>\n' +
            '            <option value="4">user_4</option>\n' +
            '        </select>',
        mounted(){
            var vm=this
            $('.select21').select2(placeholder: "请选择", allowClear: false)
            $('.select21').on('select2:select', function (e) {
                //https://github.com/select2/select2/issues/3106#issuecomment-196262305
                var id = e.params.data.id;
                var option = $(e.target).children('[value=' + id + ']');
                option.detach();
                $(e.target).append(option).change();
                vm.$emit('input', $(e.target).val());
            });
            $('.select21').on('select2:unselect', function (e) {
                vm.$emit('input',  $(e.target).val());
            });
        }
    })

输出: