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 ...
随机推荐
- flutter - 01 基础介绍以及ListView
这篇主要讲flutter最基本的操作.我们从一个实例入手,先不需要知道它里面的每一行是什么意思,我会慢慢说. main.dart import 'package:flutter/material.da ...
- Linux-进程管理
关于进程 Process what is process ? 什么是进程 process life cycle 进程的生命周期 process states 进程状态 什么是进程? 进程是已启动的可执 ...
- js实现一个长页面中的图片懒加载即滚动到其位置才加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Day050--jQuery表单事件 轮播图 插件库 ajax
表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...
- (九) 主机增加打印(串口+ssh)
目录 主机增加打印(串口+ssh) ssh 串口打印 title: 主机增加打印(串口+ssh) date: 2019/4/23 20:10:00 toc: true --- 主机增加打印(串口+ss ...
- 【知乎Live】狼叔:如何正确的学习Node.js
文章链接 https://i5ting.github.io/How-to-learn-node-correctly/#1 或在 https://github.com/i5ting/How-to-lea ...
- 使用容器编排工具docker swarm安装clickhouse多机集群
1.首先需要安装docker最新版,docker 目前自带swarm容器编排工具 2.选中一台机器作为master,执行命令sudo docker swarm init [options] 3,再需 ...
- Ubuntu16.04安装NVIDA驱动和CUDA
该GPU是计算卡,不会用做显示,所以如果你希望自己的显示使用GPU,本方法可能失效. 服务器配置: CPU: E5-母鸡 GPU: NVIDIA Tesla K40c 操作系统:Ubuntu 16. ...
- JS数组(JSON)整合篇-方法整理
遍历:arr_Param.forEach(function (item, i) {}); 反序排序:arr_Param.reverse(); 合并数组:arr_Param.push.apply(arr ...
- Git首次配置
用户身份配置 安装好Git后的第一步是设置用户名和电子邮件地址.这一步是很重要的,因为以后这将作为你每一次提交的个人信息,写入所创建的提交中,不可更改. git config --global use ...