vue2组件之select2调用的示例代码


Posted in Javascript onOctober 12, 2017

目前,项目中使用了纯前端的静态项目+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属性的对应关系,并放在全局的select2vue和dom2vue中。

//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的整合的例子。网上有好多,我不知道版权是谁的,姑且上我最先看到的那个吧。https://3water.com/article/125654.htm

原文中的代码如下:

<!DOCTYPE html>
<html>
<head>
  <title>vue select2 封装</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" 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>结果:{{ 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值,然后再触发select2的change事件,就可以了。而在使用方面,只需要给加一个v-select2即可,v-model以及option的配置都依照vue2的推荐方式,原封不动。之所以加了一个空的option是因为如果不加,默认select2是选择第一个选项的,但是,由于未知原因,与vue.editor.P1并不同步。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
vue2.x select2 指令封装详解
Oct 12 #Javascript
一个简易时钟效果js实现代码
Mar 25 #Javascript
微信小程序实现页面跳转传值的方法
Oct 12 #Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 #Javascript
微信小程序 动画的简单实例
Oct 12 #Javascript
node通过npm写一个cli命令行工具
Oct 12 #Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 #Javascript
You might like
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
python之PyMongo使用总结
2017/05/26 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python机器学习实战之K均值聚类
2017/12/20 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python flask搭建web应用教程
2019/11/19 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
《去年的树》教学反思
2014/04/11 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
教师职位说明书
2014/07/29 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript