今天正好这个知识点有点淡忘了，就随笔一下吧：

Vue.directive(参数1，参数2)

参数1：指令名称，如"drag"

参数2：指令要实现的回调函数，其中回调函数中也有两个参数，其中：

　　　　参数1：指令绑定的元素，如 el

　　　　参数2：是一个对象，其中有两个参数（value,modifiers）

　　　　　　　　value:代表表达式要返回的结果

　　　　　　　　modifiers:指令的修饰符

话不多说，直接脑补一波实例：以拖拽为例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{margin:0;padding:0}

        .box{

            width:100px;

            height: 100px;

            background: red;

            position: absolute;;

        }

    </style>

</head>

<body>

    <div id="app">

        <div class="box" v-drag.x="show"></div>

        <div class="box" v-drag.y="show"></div>

    </div>

</body>

</html>

<script src="vue.js"></script>

<script>

  Vue.directive("drag",(el,{modifiers,value})=>{
　　　　　//ES6中新增的解构赋值

        let {x,y} = modifiers

        el.onmousedown =  function(e){

            var disX = e.offsetX;

            var disY = e.offsetY;

            e.preventDefault();

            document.onmousemove = function(e){

                var l = e.clientX - disX;

                var t = e.clientY - disY;

                //如果表达式的结果是false就不拖拽

                if(!value)return;

                if(x){

                    el.style.left = l+"px";

                }

                if(y){

                    el.style.top = t+"px";

                }

                if((!x && !y)&&value){

                    el.style.left = l+"px";

                    el.style.top = t+"px";

                }

            }

            document.onmouseup = function () {

                document.onmousemove = null;

                document.onmouseup = null;

            }

        }

  })

  var vm  = new Vue({

      el:"#app",

      data:{

         show:true

      }

  })

</script>

Vue.directive全局自定义指令案例的更多相关文章

  1. vue.js实现内部自定义指令和全局自定义指令------directive

    在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...

  2. Vue.js：自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

  3. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  4. vue组件、自定义指令、路由

    1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  5. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  6. vue全局自定义指令-元素拖拽

    小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function ( ...

  7. 【Vue】通过自定义指令回顾 v-内置指令

    Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...

  8. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

  9. 在Vue中通过自定义指令获取元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Eleme ...

随机推荐

  1. day18——re正则表达式

    day18 re模块--正则表达式 匹配方法 findall():从字符串中全部查找内容,返回一个列表 s = "meet_宝元_meet" print(re.findall(&q ...

  2. 【rt-thread】2、尝试用ENV添加18b20传感器

    尝试用ENV添加18b20传感器 rt-thread能通过env工具添加或者裁剪工程,这里调试的是通过ENV添加18b20传感器. 具体程序实现,可以参考以下资料 https://www.rt-thr ...

  3. CLRS10.2-8练习 - 单指针值实现双向链表

    要求: Explain how to implement doubly linked lists using only one pointer value x.np peritem instead o ...

  4. 两个div并排显示，当浏览器界面缩小时会出现换行

    解决:规定两个子div的父div的宽 <div id="showDataDiv" style="width: 1000px"> <div st ...

  5. C# vb .net实现透视阴影特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的透视阴影特效效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 ...

  6. Angular使用操作事件指令ng-click传多个参数示例

    本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...

  7. 物料管理混乱怎么办？APS系统帮你实现高效运输

    APS系统可以高效地管理.控制分销中心并保证产品可订货.可盈利.能力可用.分销计划帮助企业分析原始信息,然后企业能够确定如何优化分销成本或者根据生产能力和成本提高客户服务水平. 今天成功的企业为了取得 ...

  8. linux上SVN出现 "Unable to connect to a repository at URL 'svn://xx.xx.xx.xx/xxx' 和 No repository ...

    centos上安装了svn, 有时候会不知道什么原因出现客户端小乌龟无法连接或无法提交等情况. 1. 万能重启,xshell连接服务器,输入 service svnserve restart 命令. ...

  9. Ubuntu安装32位程序兼容包

    有的交叉编译工具链是32位的,经常会遇到安装完成之后提示好不到,这时候需要安装32位兼容程序,使用以下命令安装: sudo apt-get update sudo apt install gcc-mu ...

  10. Linux环境变量设置declare/typeset

    形而上,质在内!形形色色,追寻本质! declare/typeset declare 或 typeset 是一样的功能,就是在宣告变数的属性 declare 后面并没有接任何参数,那么bash 就会主 ...