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

2024-10-01 08:44:23

目前，项目中使用了纯前端的静态项目+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的整合的例子。网上有好多，我不知道版权是谁的，姑且上我最先看到的那个吧。http://www.jb51.net/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并不同步。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue2.x select2 指令封装详解

本文介绍了vue2.x select2 指令封装,分享给大家,具体如下: 其他的就不说了,说说封装过程的问题吧 1.vue不同版本指令接受参数不一样 2.酱油君对于vue2.x双向绑定的机制不了解(有大神路过望在评论中不吝赐教) 上代码: <!DOCTYPE html> <html> <head> <title>vue select2 封装</title> <link href="https://cdnjs.cloudflare.
Vue.js 2.0中select级联下拉框实例

在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别. select单选实例: <select v-model="fruit"> <option selected valu
vue2组件之select2调用的示例代码

目前,项目中使用了纯前端的静态项目+RESTFul接口的模式.为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如vue-route等功能,也未使用webpack等编译功能,所以,也没有使用.vue文件功能.这时候,如果用到控件,则多数从原jquery的组件中选择. select下拉搜索选择这次的需求调研与设计是原来做winform开发的同事,由于用惯了devexpress这个控件库,所以,对于searchlookupeditor这个控
vue2.0使用swiper组件实现轮播的示例代码

1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <di
Angular 组件之间的交互的示例代码

在Angular应用开发中,组件可以说是随处可见的.本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法. 根据数据的传递方向,分为父组件向子组件传递.子组件向父组件传递及通过服务传递三种交互方法. 父组件向子组件传递子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化. 先定义两个组件,分别为子组件DemoChildComponent和父组件De
在React 组件中使用Echarts的示例代码

在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件
React 组件中的 bind(this)示例代码

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &
json的键名为数字时的调用方式(示例代码)

对于键名为数字或者非正常变量字符时(如有空格),必须使用obj[xx]方式获取值. 复制代码代码如下: <?php //声明json数据$array = array('result'=>array("90"=>"90队列","status"=>"成功"));$json = json_encode($array); $array1 = array("90"=>"90队
VUE JS 使用组件实现双向绑定的示例代码

1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器. 在VU
react.js 父子组件数据绑定实时通讯的示例代码

react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <div style={{border:'1px solid red'}}> {this.props.count} </
使用iView Upload 组件实现手动上传图片的示例代码

在过去,浏览器是不允许我们读取本地的文件,包括图片.因此,当我们需要预览一个图片的时候,往往先将它传送到服务端,然后服务端返回一个访问 url 地址,达到预览图片的功能.如今,随着标准不断的改善,JavaScript 里的 API 越来越多,我们可以通过直接读取本地文件的方式来加载我们想要看到的文本或者图片,一定程度上减少了服务端的压力. Upload 组件参考文档:https://www.iviewui.com/components/upload 文档提供的参考代码: <template>
php版微信小店调用api示例代码

本文实例讲述了php版微信小店调用api的方法.分享给大家供大家参考,具体如下: 刚开始调用微信小店api的时候,可能大家会遇到问题.系统总是提示system error,归根结底还是发送的参数不正确. 下面给出几个调用例子: 例子写得不全. <?php function cUrlRequest($url,$data = null){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CU

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

相关推荐

随机推荐