在做select2插件的时候遇到一些坑,最终解决如下:

  Vue.directive('select2', {
inserted: function (el, binding, vnode) {
var options = binding.value || {}; var defaultOpt = {
placeholder: "--请选择--",
allowClear: true
};
options = _.assign(defaultOpt, options); $(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 })); //双向绑定不生效
//绑定选中选项的事件
options && options.onSelect && options.onSelect(e);
}); //allowClear:清除选中
$(el).select2(options).on("select2:unselecting", (e) => {
//清空这个值,这个值即vuejs model绑定的值
e.target.value = "";
el.dispatchEvent(new Event('change', {
target: e.target
})); //双向绑定不生效
}); //绑定select2 dom渲染完毕时触发的事件
options && options.onInit && options.onInit();
},
update: function (el, binding, vnode) {
$(el).trigger("change");
}
});

Vuejs自定义select2指令的更多相关文章

  1. VueJS自定义全局和局部指令

    除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 使用directive自定义全局指令 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面 ...

  2. vue自定义tap指令

    1.Vue指令 Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.org/v2/guide/custom- ...

  3. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  4. Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  5. Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  6. 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- CustomYieldInstruction 自定义中断指令

    ActionScript3脚本引擎为了方便热更新逻辑开发,提供的从脚本继承Unity类库功能在一些情况下可以提供开发的便利. 这次来建立一个示例,演示一下如何在脚本中自定义协程中断指令 Unity中的 ...

  7. Vuejs自定义全局组件--loading

    不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...

  8. 【复习】VueJS之内部指令

    Vuejs 源码:https://github.com/zhuangZhou/vuejs 下载Vue.js 官网:http://vuejs.org live-server使用 live-server是 ...

  9. VueJs(4)---V-model指令

    V-model指令 摘要   限制: v-model只能用在:<input>    <select>    <textarea>  <components&g ...

随机推荐

  1. 执行Git命令时出现各种 SSL certificate problem 的解决办法

    执行Git命令时出现各种 SSL certificate problem 的解决办法 来源  https://www.cnblogs.com/chenzc/p/5842932.html 比如我在win ...

  2. HTML&CSS_基础03

    一.Meta标签: 1.可以设置网页的关键字 2.用来指定网页描述 3.可以用来网页重定向 具体参数参见:http://www.w3school.com.cn/html5/tag_meta.asp 二 ...

  3. Python学习day17 迭代器&生成器

    迭代器&生成器 1. 迭代器 1.1 迭代器 迭代:迭代是重复反馈过程的活动,其目的通常是为了逼近所需目标或结果.每一次对过程的重复称为一次"迭代" 迭代器:帮助对某种对象 ...

  4. 将gbk字符串转换成utf-8,存储到注册表中后,再次从注册表读取转换成gbk,有问题!!!

    char *a = "新2新"; printf("gbk:'%s'\n", a); int ii; ; ii < strlen(a); ii++) { p ...

  5. Python——一个简单的类的创建和应用

    1.创建类,设置属性和给属性设定默认值,设置方法并访问类的属性: 2.利用类创建多个实例,以及调用类的方法的两种办法: 3.设置更新属性的函数,并更新实例的属性. class dog(object): ...

  6. JS“盒子模型”

    列举几个常用的属性 client系列 clientWidth - 盒子真实内容的宽度[content+padding左右],不包括边线和滚动条 clientHeight - 盒子真实内容的高度[con ...

  7. PHP和JS在循环、条件判断中的不同之处

    一.条件判断: php中算  false 的情况 1. boolean:false 2. 整形:0 3.浮点型:0 4.字符串:"" "0"(其他都对) 5.空 ...

  8. UOJ #450「集训队作业2018」复读机

    UOJ #450 题意 有$ k$台复读机,每时每刻有且只有一台复读机进行复读 求$ n$时刻后每台复读机的复读次数都是$ d$的倍数的方案数 $ 1\leq d \leq 3,k \leq 5·10 ...

  9. BH1750FVI调试

    在写此博客之前已经看了几遍数据手册了,现在已经调试成功了,可以读出来数据,还有不如意的地方,写此博客整理下思路. 1.BH1750fvi介绍. 这是一个16bit的数字传感器,使用I2C作为通信接口, ...

  10. 软件测试面试必问--bug交互流程

    目前市场主要用的bug管理工具:禅道.jira.QC.bugfree等,当然也有自己公司开发的. 不过不管哪一种工具,核心交互流程都是差不多的,只是字段的名称不一样而已,参考如下两张示意图: 这是前几 ...