vue2.x select2 指令封装详解

本文介绍了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>

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

赞 (0)

相关推荐

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

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

  • 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.x select2 指令封装详解

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

  • lottie实现vue自定义loading指令及常用指令封装详解

    目录 一.前言 二.实现方式 1.v-loading 2.v-click-outside 三.后记 一.前言 本文主要介绍使用lottie动画实现vue自定义loading的指令方法.另外本篇文章还会介绍其他几个常用的自定义指令实现方式(点击指定区域外监听指令). lottie是一款由airbnb开源的跨平台动画渲染库,支持Android,iOS,Web,Windows平台.是专门用于解析从AE(Adobe After Effects)中通过Bodymovin插件导出的JSON文件,直接渲染动画

  • 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

    最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下AngularJS的提供的指令,但是没有发现相应的指令.而一个看起来很像的指令就是ng-checked,但是这个指令是用来代替标签里面checked属性的,所以也用不了.因此我就自己动手试着写一个这样的指令,相应的代码如下: <form name="test_form" ng-controller="TestCtrl"> <input type="checkbox&

  • Angularjs自定义指令Directive详解

    Angularjs自定义指令Directive详解

    今天学习angularjs自定义指令Directive. Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin". 在网页上放一个文本框和一个铵钮: <form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate> <i

  • Angular 中 select指令用法详解

    最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-

  • Android Xutils3网络请求的封装详解及实例代码

     Xutils3网络请求的封装详解 封装了一个Xutil3的网络请求工具类,分享给大家,本人水平有限,不足之处欢迎指出. 使用前先配置xutils3: 1.gradle中添加 compile 'org.xutils:xutils:3.3.40' 2.自定义Application /** * Created by Joe on 2016/9/25. */ public class MyApp extends Application { @Override public void onCreate(

  • Android OkHttp的简单使用和封装详解

    Android OkHttp的简单使用和封装详解

    Android OkHttp的简单使用和封装详解 1,昨天把okHttp仔细的看了一下,以前都是调用同事封装好了的网络框架,直接使用很容易,但自己封装却不是那么简单,还好,今天就来自我救赎一把,就和大家写写从最基础的OKHttp的简单get.post的使用,再到它的封装. 2,OkHttp的简单使用 首先我们创建一个工程,并在布局文件中添加三个控件,TextView(用于展示获取到json后的信息).Button(点击开始请求网络).ProgressBar(网络加载提示框) ①简单的异步Get请

  • 基于javascript的拖拽类封装详解

    基于javascript的拖拽类封装详解

    效果图如下 github地址如下: github地址 使用方法 引入js和对应的css import Drag from '../../static/dragger.js' import './assets/css/dragger.css' 之后,实例化 new Drag({ id: 'box-dragger', showAngle: true, isScale: false, showBorder: false }) new Drag({ id: 'box-dragger2', canZoom

  • django的模型类管理器——数据库操作的封装详解

    模型实例方法 str():在将对象转换成字符串时会被调用. save():将模型对象保存到数据表中,ORM框架会转换成对应的insert或update语句. delete():将模型对象从数据表中删除,ORM框架会转换成对应的delete语句. 模型类的属性 属性objects:管理器,是Manager类型的对象,用于与数据库进行交互. 当没有为模型类定义管理器时,Django会为模型类生成一个名为objects的管理器,自定义管理器后,Django不再生成默认管理器objects. 管理器是D

  • python os.system执行cmd指令代码详解

    1.执行cmd指令,在cmd输出的内容会直接在控制台输出,返回结果为0表示执行成功. 2.在调用完shell脚本后,返回一个16位的二进制数,低位为杀死所调用脚本的信号号码,高位为脚本的退出状态码. os.system()方法是简单粗暴的执行cmd指令,没有办法获取到cmd输出的内容. 实例 # coding:utf-8 import os os.system("ls") Python如何使用OS模块调用cmd 在os模块中提供了两种调用 cmd 的方法,os.popen() 和 os

随机推荐