Vuejs自定义select2指令
在做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指令的更多相关文章
- VueJS自定义全局和局部指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 使用directive自定义全局指令 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面 ...
- vue自定义tap指令
1.Vue指令 Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.org/v2/guide/custom- ...
- angularjs 创建自定义的指令
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- CustomYieldInstruction 自定义中断指令
ActionScript3脚本引擎为了方便热更新逻辑开发,提供的从脚本继承Unity类库功能在一些情况下可以提供开发的便利. 这次来建立一个示例,演示一下如何在脚本中自定义协程中断指令 Unity中的 ...
- Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...
- 【复习】VueJS之内部指令
Vuejs 源码:https://github.com/zhuangZhou/vuejs 下载Vue.js 官网:http://vuejs.org live-server使用 live-server是 ...
- VueJs(4)---V-model指令
V-model指令 摘要 限制: v-model只能用在:<input> <select> <textarea> <components&g ...
随机推荐
- bzoj 5301: [Cqoi2018]异或序列 (莫队算法)
链接:https://www.lydsy.com/JudgeOnline/problem.php?id=5301 题面; 5301: [Cqoi2018]异或序列 Time Limit: 10 Sec ...
- 单元测试报错NoSuchBeanDefinitionException
问题 在SpringBoot项目开发时,使用单元测试来运行一个Service,发现调用的一个Bean就是找不到,报错为: org.springframework.beans.factory.NoSuc ...
- vscode常用插件
vscode写JS/html/css是比较适合的,因为轻量级. 只是需要一些插件来完善VSCODE功能,感觉VSCODE就是要靠插件的,不然的话,只是一个高级的代码编辑器.可能比editplus&qu ...
- Spring Boot学习总结二
Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结构,例如hashes, lists, sets等,同时支持数据持久化.除此之外,Redis还提供一些类 ...
- 核心类生成-Mybatis Generator的使用
总结一下Generator的使用,首先要设计好数据表,然后修改generator.xml中的配制,接着直接运行命令就可以了. 第一步:数据库设计: 生成数据表代码: /* Navicat MySQL ...
- 装饰器模式-Decorator(Java实现)
装饰器模式-Decorator(Java实现) 装饰器模式允许向一个现有的对象添加新的功能, 同时又不改变其结构. 其中 "现有对象"在本文中是StringDisplay类. 添加 ...
- Java调用第三方http接口的方式
1. 概述 在实际开发过程中,我们经常需要调用对方提供的接口或测试自己写的接口是否合适.很多项目都会封装规定好本身项目的接口规范,所以大多数需要去调用对方提供的接口或第三方接口(短信.天气等). 在J ...
- 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- java压缩文件或文件夹并导出
java压缩文件或文件夹并导出 tozipUtil: package com.zhl.push.Utils; import java.io.File; import java.io.FileInput ...
- js循环内0.5s停止
var time_begin = new Date().getTime(); while(true){ if(new Date().getTime()-time_begin > 500) bre ...