码迷,mamicode.com
首页 > Web开发 > 详细

Vuejs自定义select2指令

时间:2017-05-23 16:32:55      阅读:337      评论:0      收藏:0      [点我收藏+]

标签:target   ini   nod   cti   directive   hang   pre   div   named   

  在做select2插件的时候遇到一些坑,最终解决如下:

  Vue.directive(‘select2‘, {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            var defaultOpt = {
                placeholder: "--请选择--",
                allowClear: true
            };
            options = _.assign(defaultOpt, options);

            $(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 })); //双向绑定不生效
                //绑定选中选项的事件
                options && options.onSelect && options.onSelect(e);
            });

            //allowClear:清除选中
            $(el).select2(options).on("select2:unselecting", (e) => {
                //清空这个值,这个值即vuejs model绑定的值
                e.target.value = "";
                el.dispatchEvent(new Event(‘change‘, {
                    target: e.target
                })); //双向绑定不生效
            });

            //绑定select2 dom渲染完毕时触发的事件
            options && options.onInit && options.onInit();
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });

 

Vuejs自定义select2指令

标签:target   ini   nod   cti   directive   hang   pre   div   named   

原文地址:http://www.cnblogs.com/skybreak/p/6894587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!