• Vuejs自定义select2指令


      在做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");
            }
        });
  • 相关阅读:
    inotify+rsync做实时同步
    JAVA序列化和反序列化
    初识iBatis
    《Spring in action》之高级装配
    《Spring in action》之装配Bean
    原根
    数论知识
    线性(欧拉)筛
    Codeforces Round #423 (Div. 2, rated, based on VK Cup Finals) E DNA Evolution
    Fibonacci
  • 原文地址:https://www.cnblogs.com/skybreak/p/6894587.html
Copyright © 2020-2023  润新知