vue ----自定义指令Vue.directive(),实现拖拽

 

Vue.directive("drag",(...rest)=>{

        //...rest展开对象

        console.log(rest);//第一个值为使用v-drag指令的当前元素，

        console.log(typeof rest);//object

    })

 

 

所以，设置第一个参数为当前的元素el（谁使用该指令，谁就是当前元素）

 

 

 

modifiers修饰符：不写，则为空，写则为a:true,b:true,,a,b为修饰符

 

value:值，并不是固定的，根据v-drag="值"来确定的

 

rewName:指令的全称

 

 

es6解构赋值

{modifier,value}获取了...rest中的modifier,value值

 

 

vue全局自定义指令实现拖拽

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    
    


    
"app">
　　　　//y轴拖拽
        
class="box" v-drag.y="show">
　　　　//x轴拖拽
        
class="box" v-drag.x="show">
    
    

 

转载于:https://www.cnblogs.com/SRH151219/p/10388750.html