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");
        }
    });
时间: 2024-10-06 00:40:22

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

angularjs 自定义弹窗指令

由于angularjs 项目中频繁使用弹窗,完全自行编写耗时耗力,所以结合ui-boostrap 中的modal 模块来实现功能 创建一个公共弹窗服务,在使用的组件中依赖注入后调用弹窗方法 在最外层组件(其余组件的父组件)注入弹窗服务,并定义调用弹窗的方法:其余组件require 此父组件,调用父组件中的方法 自定义一个弹窗指令,设置仅属性调用(restrict: 'A'),在主模块注入后,即可全局调用 经过一步步实践和优化后,尽量减少中间环节,最终确认使用自定义指令来实现弹窗功能. js 及c

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

vue15 自定义元素指令、标签指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社--http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, ma

创建自定义的指令

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> &l

angularJS中自定义验证指令中的$parsers and $formatters

本文翻译自:$parsers and $formatters in Custom Validation Directives in Angular JS 在使用angularJS的应用中,有时候我们需要定义自己的表单验证.自定义验证在angularJS中是通过创建指令来实现的,该指令依赖于ng-model指令,主要是依赖于它的controller. ng-model指令提供2个由函数组成的数组: $parsers 和 $formatters,这些函数用于实现自定义验证逻辑时调用.这两个数组的用途

VueJs 自定义过滤器使用总结

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | uppercase }} // 'abc' => 'ABC' 在上述的例子中,在插值的时候,使用了Vue的一个uppercase过滤器,msg可以是直接写死,写成{{ 'abc' | uppercase }},也可以利用用户输入来改

VueJs(5)---V-bind指令

V-bind指令 一.概述 v-bind  主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定. 示例: <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src=&

vue自定义拖动指令

1.在项目开发中,需要对div进行拖动.因为需要自定义组件 a>定义全局拖拽指令: 定义全局指令,需要在main.js中写入vue.directive('drag',{});即可.但是一般会在外部新建一个drag.js文件,在js文件内部实现拖拽逻辑,最后在dom代码中调用该指令: (1).新建drag.js文件: import Vue from 'vue'; //使用Vue.directive()定义一个全局指令 //1.参数一:指令的名称,定义时指令前面不需要写v- //2.参数二:是一个对

第三章 指令-- 29 指令-自定义全局指令让文本框获取焦点

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8