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 ...
随机推荐
- 「ZJOI Day2」游记
Day-1 晚上一直在出自己做的模拟赛的T1,真的快要死掉了. 分类讨论几十种情况. 窝还是找了Bluesky大佬一起来验题,她瞬间就A掉了这一道题目...自闭了.. 诶,我还是太弱了. 之前教练组织 ...
- 【dp】导弹拦截
题目链接 https://www.luogu.org/problemnew/show/P1020 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的 ...
- JavaScript DOM 高级程序设计读书笔记一
创建可重用的对象 简而言之,对象就是包含一组变量(称为属性)和函数(称为方法)的集合的实例.对象通常由类派生而来,而类中定义了对象拥有的属性和方法.如果你的脚本中都是对象之间的交互操作,那么就可以称之 ...
- cenos7上部署python3环境以及mysqlconnector2.1.5
本机的python2不要管他,因为可能有程序依赖目前的python2环境,比如yum!!!!! 一.安装python3依赖环境: yum -y install zlib-devel bzip2-dev ...
- (N叉树 DFS 递归 BFS) leetcode 559. Maximum Depth of N-ary Tree
Given a n-ary tree, find its maximum depth. The maximum depth is the number of nodes along the longe ...
- Matlab安装完成后,出现错误licensing error:-8523的解决方法
Matlab2018安装成功后,打开出现licensing error:-8523解决方法 https://blog.csdn.net/qq_41634276/article/details/8000 ...
- VMware 常见问题及解决办法
Ø 简介 本文介绍使用 VMware 虚拟机时常见的问题及解决办法,主要包括: 1. 虚拟机操作系统装好后,每次进入虚拟机还进入安装程序 2. 虚拟机不能与主机复制粘帖 3. 解决错误: ...
- 在Ubuntu/CentOS/Debian系统下,使用CPU挖Monero (XMR)币
CentOS7(增加源) yum repolist # 查看yum源列表 yum localinstall http://dl.fedoraproject.org/pub/epel/7/x86_64/ ...
- vue生命周期的理解
我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...
- 动态解析xml,并生成excel,然后发邮件。
直接贴代码了! DECLARE @CurrentServer NVARCHAR(100)DECLARE @CurrentDatabase NVARCHAR(100)DECLARE @CurrentLo ...