在做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. 远离go path,弃用go get,使用go mod 进行go语言的学习

    标题说的是go语言的学习,因为我也没做过开发 文章要解决的仅仅是一个问题 当你使用go get 无论如何get不到所需的包的问题 第一步就是下载goland 新手极其推荐goland,因为直接使用gl ...

  2. 【BZOJ3997】[TJOI2015]组合数学(动态规划)

    [BZOJ3997][TJOI2015]组合数学(动态规划) 题面 BZOJ 洛谷 题解 相当妙的一道题目.不看题解我只会暴力网络流 先考虑要求的是一个什么东西,我们把每个点按照\(a[i][j]\) ...

  3. [HNOI/AHOI2018]毒瘤

    题目描述 https://www.lydsy.com/JudgeOnline/upload/201804/%E6%B9%96%E5%8D%97%E4%B8%80%E8%AF%95%E8%AF%95%E ...

  4. macos + vs code + grep 进行多文件搜索

    macos下,打开vs code后,选择view菜单,点击terminal, 在vs code中打开控制台.执行以下grep命令: grep -w "p" -n -r  /User ...

  5. 程序人生 | 35岁以上的 iOS 程序员都到哪里去了?

    1.网上流传华为公司正在清理 34 岁以上的员工. " 中国区开始集中清理 34 + 的交付员工,...... 去向是跟海外服务部门交换今年新毕业的校招员工,也就是进新人,出旧人. 这些旧人 ...

  6. [localhost-startStop-1] org.apache.catalina.startup.HostConfig.deployDirectory Deployment of web application directory [E:\soft\studySoft\tomcat\apache-tomcat-8.5.33\webapp

    问题 启动tomcat,就一直卡在了这里 继续往上查看日志 解决方法:

  7. kubernetes之flannel

    kubernetes网络通信 容器间的通信   pod内的容器通信(lo) Pod之间的通信   pod IP <-----> pod IP Pod与Service之间的通信 podIP ...

  8. DirectX11 With Windows SDK--24 Render-To-Texture(RTT)技术的应用

    前言 尽管在上一章的动态天空盒中用到了Render-To-Texture技术,但那是针对纹理立方体的特化实现.考虑到该技术的应用层面非常广,在这里抽出独立的一章专门来讲有关它的通用实现以及各种应用. ...

  9. node服务端口被占用Error listen EADDRINUSE :::3000

    Error: listen EADDRINUSE: address already in use :::3000,出现这个报错说明3000端口被占用 解决方法:找到占用该端口的程序,kill杀掉它就可 ...

  10. Arrays和String单元测试 20175301

    要求 在IDEA中以TDD的方式对String类和Arrays类进行学习 一.String类相关方法的单元测试 1.ChatAt的测试 代码: import org.junit.Test; impor ...