vue2.x select2 指令封装详解


Posted in Javascript onOctober 12, 2017

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

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

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

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

上代码:

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

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

Javascript 相关文章推荐
我的javascript 函数链之演变
Apr 07 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
一个简易时钟效果js实现代码
Mar 25 #Javascript
微信小程序实现页面跳转传值的方法
Oct 12 #Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 #Javascript
微信小程序 动画的简单实例
Oct 12 #Javascript
node通过npm写一个cli命令行工具
Oct 12 #Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 #Javascript
AngularJS实现表单验证功能详解
Oct 12 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php生成图片验证码的方法
2016/04/15 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python八大排序算法速度实例对比
2017/12/06 Python
Flask-Mail用法实例分析
2018/07/21 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
金山毒霸系列的笔试题
2013/04/13 面试题
用Python写一个for循环的例子
2016/07/19 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
半年思想汇报
2013/12/30 职场文书
打造完美自荐信
2014/01/24 职场文书
2015新学期家长寄语
2015/02/26 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
python关于集合的知识案例详解
2021/05/30 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
vue打包时去掉所有的console.log
2022/04/10 Vue.js