Vue.directive全局自定义指令案例

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

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全局自定义指令案例

最新文章

热门文章