快捷導(dǎo)航

vue2組件之select2調(diào)用的示例代碼

更新時(shí)間：2017年10月12日 16:56:49 作者：ensleep

本篇文章主要介紹了vue2組件之select2調(diào)用的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

目前，項(xiàng)目中使用了純前端的靜態(tài)項(xiàng)目+RESTFul接口的模式。為了更好的對(duì)數(shù)據(jù)進(jìn)行操作，前端使用了vue2的mvvm功能，但是由于不是單頁面應(yīng)用，所以，并沒有涉及到其它的如vue-route等功能，也未使用webpack等編譯功能，所以，也沒有使用.vue文件功能。這時(shí)候，如果用到控件，則多數(shù)從原jquery的組件中選擇。

select下拉搜索選擇

這次的需求調(diào)研與設(shè)計(jì)是原來做winform開發(fā)的同事，由于用慣了devexpress這個(gè)控件庫，所以，對(duì)于searchlookupeditor這個(gè)控件情有獨(dú)鐘，所以，在設(shè)計(jì)的時(shí)候，許多地方都用到。

最初實(shí)現(xiàn)

最初，我使用了select2綁定select標(biāo)簽，設(shè)定其change事件，在事件中修改對(duì)應(yīng)的vue的data值，同時(shí)，在vue中設(shè)定watch``data中被綁定的屬性，屬性值發(fā)生變化，則修改對(duì)應(yīng)的dom的val，然后再觸發(fā)select2的change事件。當(dāng)然，這種對(duì)應(yīng)關(guān)系，我在select標(biāo)簽上放了一個(gè)data-vuep來保存其與vue屬性的對(duì)應(yīng)關(guān)系，并放在全局的select2vue和dom2vue中。

//mounted中的部分代碼
            select2vue = {};
          $("select").each(function (index, item) {
            var s2 = $(item).select2({
              language: "zh-CN", //設(shè)置 提示語言
              width: "100%", //設(shè)置下拉框的寬度
              theme: "classic",
              placeholder: "請(qǐng)選擇"
            }).on("change", function (e) {
              console.log(e);
              var v = $(e.target).val();
              var p = $(e.target).attr("data-vuep");
              eval("vue_cust_busi." + p + "='" + v + "';");
              //$(e.target).find("option").attr("selected",false);
              //$(e.target).find("option[value='"+v+"']").attr("selected",true);
            });

            var p = $(item).attr("data-vuep");
            select2vue[p] = s2;
            dom2vue[p] = item;
          });
          setTimeout(function(){
            vue_cust_busi.editor.ID_CUST="3";
            vue_cust_busi.editor.NAME_CUST="*有限責(zé)任公司";
            console.log("修改");
          },10,null);


//watch中的部分代碼
          "temp.P1": function (val) {
            fire(arguments.callee.name.toString(), val);

          },
//通用函數(shù)

    function fire(p, val) {
      $(dom2vue[p]).val(val);
      select2vue[p].trigger("change");
    }

//html

                        <select data-vuep="editor.P1" class="form-control "> 
                            <option value="" ></option>  
                            <option v-for="yearOpt in yearOpts" v-bind:value="yearOpt">{{yearOpt}}</option> 
                        </select>

為什么要用一個(gè)data-vuep來將數(shù)據(jù)與vue的屬性關(guān)聯(lián)呢，因?yàn)槲野l(fā)現(xiàn)，select2初始化了這個(gè)select標(biāo)簽之后，修改這個(gè)標(biāo)簽的值無法觸發(fā)修改vue對(duì)應(yīng)的v-model的屬性。所以，只能用這個(gè)方法。
最終形成的結(jié)果是：

select2到vue.editor.P1：
1.select2被選擇某一項(xiàng)，觸發(fā)其change事件。
2.select2的change事件修改vue.editor.P1的值。
3.vue.editor.P1的值被修改，觸發(fā)watch，watch又引發(fā)select2的change事件，但是，select2內(nèi)部監(jiān)控到選擇和之前的一致，所以，不再執(zhí)行change事件的委托。

上面這種流程一定程度是實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，但是，非常復(fù)雜。在后續(xù)的使用中發(fā)現(xiàn)，在mounted中無法為select2默認(rèn)值，必須在mounted中調(diào)用setTimeout生成一個(gè)定時(shí)執(zhí)行的事件來執(zhí)行數(shù)據(jù)綁定操作，才會(huì)觸發(fā)上述流程，達(dá)到設(shè)定觸始值的效果。

使用vue指令

經(jīng)過一番掙扎，覺得上面這種方式還是不行。

上述方案不好的原因如下：

1.vue事件中的代碼操作了dom，這樣，在生命周期上可能會(huì)出現(xiàn)問題，特別是后來使用了setTimeout之后，生命周期變得更加不可控制。
2.每增加一個(gè)select組件，都需要增加 html標(biāo)簽、watch，而且，html 標(biāo)簽和watch既不是傳統(tǒng)的寫法，也不是vue的寫法，而是發(fā)明了一種新的東西，這破壞了開發(fā)體驗(yàn)。
3.維護(hù)性比較差，當(dāng)想刪除一個(gè)select的時(shí)候，必須要去watch里面去找與html中data-vuep相等的屬性監(jiān)控方法，并將其刪除掉。
4.兼容性不好，本方案選擇將頁面所有的select全部用select2初始化了一次，使得不論是否需要的，都會(huì)被影響；其次，如果不統(tǒng)一初始化，那么又多出了在mounted中為每一個(gè)select寫初始化代碼的工作，同時(shí)，也要為每個(gè)select取一個(gè)id。

為了解決這個(gè)問題，我又找到了最初看到的那個(gè)vue使用指令和select2的整合的例子。網(wǎng)上有好多，我不知道版權(quán)是誰的，姑且上我最先看到的那個(gè)吧。http://chabaoo.cn/article/125654.htm

原文中的代碼如下:

<!DOCTYPE html>
<html>
<head>
  <title>vue select2 封裝</title>
  <link  rel="external nofollow" 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>
  <style type="text/css">
    .content{
      text-align: center;
      padding:50px;
    }
    .content *{
      text-align: left;
    }
    .select{
      width: 350px;
    }
  </style>
</head>
<body>
  <div class="content" id="vue-example">
    <select class="select" v-select2='options' v-model="selectValue"></select>
    <br/>
    <span>結(jié)果：{{ selectValue }}</span>
  </div>
</body>
<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>
</html>

作者也說了，對(duì)vue2.x的雙向綁定機(jī)制不了解，希望路過的大神幫幫忙。

我不是vue2的大神，甚至連新手都不算，只能說是初學(xué)者。我對(duì)代碼進(jìn)行了調(diào)整，當(dāng)然，也是操作了dom，但是由于封裝在指令里面了，使用人員不需要再次操作，不涉及到開發(fā)人員操作dom的情況，我還是可以接受的。

    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 })); //說好的雙向綁定，竟然不安套路
          console.log("fire change in insert");
        });
      },
      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);
            console.log("new value in update:"+vnode.data.directives[i].value);
          }
        }
        $(el).trigger("change");
        console.log("fire change in update");
      }
    });

//html代碼

<select v-select2="" v-model="editor.P1" required="required" class="form-control ">
 <option value=""></option>
 <option v-for="item in codes" v-bind:value="item.NAME">{{item.NAME}}</option>
</select>

經(jīng)過好幾天的研究，終于我發(fā)現(xiàn)在作者原來的代碼的update中，加入修改el的val值，然后再觸發(fā)select2的change事件，就可以了。而在使用方面，只需要給加一個(gè)v-select2即可，v-model以及option的配置都依照vue2的推薦方式，原封不動(dòng)。之所以加了一個(gè)空的option是因?yàn)槿绻患?，默認(rèn)select2是選擇第一個(gè)選項(xiàng)的，但是，由于未知原因，與vue.editor.P1并不同步。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: