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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
Python深入学习之闭包
2014/08/31 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
高二化学教学反思
2014/01/30 职场文书
事业单位考核材料
2014/05/21 职场文书
党建工作经验交流材料
2014/05/25 职场文书
舞蹈专业求职信
2014/06/13 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
春季运动会开幕词
2015/01/28 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL