vue2.0_vue2.x select2 指令封装详解

【www.bbyears.com--说说】

本文介绍了vue2.x select2 指令封装，分享给大家，具体如下：

其他的就不说了，说说封装过程的问题吧

1、vue不同版本指令接受参数不一样

2、酱油君对于vue2.x双向绑定的机制不了解（有大神路过望在评论中不吝赐教）

上代码：

  
  
  <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>
  


  
    
    

    结果：{{ selectValue }}
  

<script type="text/javascript">
  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) {
    $(el).trigger("change");
   }
  });
 
  var vueApp = new Vue({
   el: "#vue-example",
   data: {
    selectValue: "你还没有选值",
    options: {
      data: [
          { id: 0, text: "enhancement" },
        { id: 1, text: "bug" },
        { id: 2, text: "duplicate" },
        { id: 3, text: "invalid" },
        { id: 4, text: "wontfix" }
      ]
    }
   }
  });
</script>

本文来源：http://www.bbyears.com/zhufuduanxin/137910.html