内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

vue2组件:select2调用详解

2017-10-12 17:05 出处:清屏网 人气: 评论(0

目前,项目中使用了纯前端的静态项目+RESTFul接口的模式。为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如 vue-route 等功能,也未使用 webpack 等编译功能,所以,也没有使用 .vue 文件功能。这时候,如果用到控件,则多数从原jquery的组件中选择。

select下拉搜索选择

这次的需求调研与设计是原来做winform开发的同事,由于用惯了 devexpress 这个控件库,所以,对于 searchlookupeditor 这个控件情有独钟,所以,在设计的时候,许多地方都用到。

最初实现

最初,我使用了select2绑定 select 标签,设定其change事件 ,在事件中修改对应的vue的data值,同时,在vue中设定 watch``data 中被绑定的属性,属性值发生变化,则修改对应的 dom 的val,然后再触发select2的change事件。当然,这种对应关系,我在 select 标签上放了一个data-vuep来保存其与vue属性的对应关系,并放在全局的 select2vuedom2vue 中。

//mounted中的部分代码
                        select2vue = {};
                    $("select").each(function (index, item) {
                        var s2 = $(item).select2({
                            language: "zh-CN",  //设置 提示语言
                            width: "100%", //设置下拉框的宽度
                            theme: "classic",
                            placeholder: "请选择"
                        }).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="*有限责任公司";
                        console.log("修改");
                    },10,null);


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

                    },
//通用函数

        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>

为什么要用一个 data-vuep 来将数据与vue的属性关联呢,因为我发现, select2 初始化了这个 select 标签之后,修改这个标签的值无法触发修改vue对应的v-model的属性。所以,只能用这个方法。

最终形成的结果是:

select2到vue.editor.P1:

  1. select2被选择某一项,触发其change事件。
  2. select2的change事件修改vue.editor.P1的值。
  3. vue.editor.P1的值被修改,触发watch,watch又引发select2的change事件,但是,select2内部监控到选择和之前的一致,所以,不再执行change事件的委托。

上面这种流程一定程度是实现了数据的双向绑定,但是,非常复杂。在后续的使用中发现,在mounted中无法为select2默认值,必须在mounted中调用setTimeout生成一个定时执行的事件来执行数据绑定操作,才会触发上述流程,达到设定触始值的效果。

使用vue指令

经过一番挣扎,觉得上面这种方式还是不行。

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

  1. vue事件中的代码操作了dom,这样,在生命周期上可能会出现问题,特别是后来使用了setTimeout之后,生命周期变得更加不可控制。
  2. 每增加一个select组件,都需要增加 html标签、watch,而且,html 标签和watch既不是传统的写法,也不是vue的写法,而是发明了一种新的东西,这破坏了开发体验。
  3. 维护性比较差,当想删除一个select的时候,必须要去watch里面去找与html中data-vuep相等的属性监控方法,并将其删除掉。
  4. 兼容性不好,本方案选择将页面所有的select全部用select2初始化了一次,使得不论是否需要的,都会被影响;其次,如果不统一初始化,那么又多出了在mounted中为每一个select写初始化代码的工作,同时,也要为每个select取一个id。

为了解决这个问题,我又找到了最初看到的那个vue使用指令和select2的整合的例子。网上有好多,我不知道版权是谁的,姑且上我最先看到的那个吧。 http://blog.csdn.net/amohan/article/details/58651100

原文中的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>vue select2 封装</title>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script src="http://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>结果:{{ 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>

作者也说了,对vue2.x的双向绑定机制不了解,希望路过的大神帮帮忙。

我不是vue2的大神,甚至连新手都不算,只能说是初学者。我对代码进行了调整,当然,也是操作了dom,但是由于封装在指令里面了,使用人员不需要再次操作,不涉及到开发人员操作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>

经过好几天的研究,终于我发现在作者原来的代码的update中,加入修改 el 的val值,然后再触发 select2change 事件,就可以了。而在使用方面,只需要给加一个v-select2即可,v-model以及option的配置都依照vue2的推荐方式,原封不动。之所以加了一个空的 option 是因为如果不加,默认 select2 是选择第一个选项的,但是,由于未知原因,与vue.editor.P1并不同步。

分享给小伙伴们:
本文标签: select2vue2

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号