vue之自定义指令解析和实现拖拽和上下左右滑长按指令

最新推荐文章于 2023-06-07 11:27:10 发布

牛先森家的牛奶

最新推荐文章于 2023-06-07 11:27:10 发布

阅读量2.9k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42681295/article/details/114188178

版权

Vue 专栏收录该内容

119 篇文章 2 订阅

订阅专栏

vue的自定义指令

注意点：bind 和 inserted

共同点： dom插入都会调用，bind在inserted之前

不同点：
    bind 时父节点为 null
    inserted 时父节点存在。
    bind是在dom树绘制前调用，inserted在dom树绘制后调用

bind: function (el) {
    console.log('bind',el.parentNode)  // null
},
inserted: function (el) {
    console.log('inserted',el.parentNode)  // <div>...</div>
}

在这里插入图片描述

注意：自定义指令的钩子里面没有vue实例，this指向undefined；

自定义指令的作用是用于对DOM元素进行底层操作

钩子函数

bind 类似于created 只调用一次，指令第一次绑定到元素时调用，此时被绑定元素在页面上还不存在；
inserted 类似于mounted ,被绑定元素插入到dom的时候执行，此时该元素在页面上已经存在了；
update 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新；
componentUpdated 被绑定元素所在模板完成一次更新周期时调用；
unbind 只调用一次，指令与元素解绑时调用；

钩子函数内的参数

el: 被绑定的元素，可以用来直接操作 DOM el.innerHTML 、 el.addEventListener
binding: 一个对象, 指的是指令本身 v-abc:xxx.a.b.c="abcde"

[arg] 动态指令参数

v-myDirectiveValue:[argument]="value"

在这里插入图片描述
注：具体看官网解释

未指明钩子函数时，默认bind和update中

const vm = new Vue({
            el: "#app",
            data: {
                
            },
            //自定义局部指令的时候，如果直接跟一个函数，没有写(bind inserted update)的时候，就相当于把该函数写到了bind和update中
            directives:{
                fontSize:function(el,binding){
                    el.style.fontSize = binding.value+'px'
                }
            }
        })

font-size的设置

 directives:{
        fontSize:function(el,binding){
            el.style.fontSize = binding.value+'px'
        }
 }

使用

<template>
    <div>
        <div v-fontSize='40'>牛奶</div>
    </div>
</template>
<script>

export default {
    name: 'homePage',
    components:{
        test
    },
    data() {
        return {
            test:''
        }
    },
    created(){
    },
    computed:{
    },
    methods:{
   
    },
    mounted() {
        console.log(this.$el);
        // this.$el.style.backgroundColor = "green"
    },
    directives:{
        fontSize:function(el,binding){
            el.style.fontSize = binding.value+'px'
        }
    }
}
</script>
<style lang="scss" scoped>

</style>
<style scoped>

</style>

在这里插入图片描述

PC端拖拽

// 拖拽
Vue.directive('drag', { // 全局弹窗拖拽指令
    bind: function (el, binding, vnode) {
    	console.log("parent",el.parentNode)  // null
        let oDiv = el;
        let self = vnode.context;
        oDiv.onmousedown = (e) => {
            let disX = e.clientX - oDiv.offsetLeft;
            let disY = e.clientY - oDiv.offsetTop;
            document.onmousemove = (e) => {
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                // 限制拖拽在可视范围内
                if (left <= 0) {
                    left = 5; //设置成5是为了不离边缘太近
                } else if (left > document.documentElement.clientWidth - el.clientWidth) {
                    //document.documentElement.clientWidth 屏幕的可视宽度
                    left = document.documentElement.clientWidth - el.clientWidth - 5
                }
                if (top <= 0) {
                    top = 5;
                } else if (top > document.documentElement.clientHeight - el.clientHeight) {
                    top = document.documentElement.clientHeight - el.clientHeight - 5
                }
                if (!left && !top) {
                    oDiv.style.left = self.currentLeft;
                    oDiv.style.top = self.currentTop;
                } else {
                    oDiv.style.left = left + "px";
                    oDiv.style.top = top + "px";
                }
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    },
    // inserted : function (el, binding, vnode) {
    //     console.log("parent",el.parentNode) 
    //     let oDiv = el;
    //     let self = vnode.context;
    //     oDiv.onmousedown = (e) => {
    //         let disX = e.clientX - oDiv.offsetLeft;
    //         let disY = e.clientY - oDiv.offsetTop;
    //         console.log("1123",disX,disY);
    //         document.onmousemove = (e) => {
    //             let left = e.clientX - disX;
    //             let top = e.clientY - disY;
    //             if (!left && !top) {
    //                 oDiv.style.left = self.currentLeft;
    //                 oDiv.style.top = self.currentTop;
    //             } else {
    //                 oDiv.style.left = left + "px";
    //                 oDiv.style.top = top + "px";
    //             }
    //         };
    //         document.onmouseup = (e) => {
    //             document.onmousemove = null;
    //             document.onmouseup = null;
    //         };
    //     };
    // },
})

移动端拖拽

全局指令写法如下

Vue.directive('drag', {
    inserted(el) {
        let switchPosition = {
            x: 10,
            y: 10,
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
        }
        el.addEventListener('touchstart', function (e) {
            console.log(e)
            switchPosition .startX = e.touches[0].pageX
            switchPosition .startY = e.touches[0].pageY
        })
        el.addEventListener('touchend', function (e) {
            switchPosition .x = switchPosition .endX
            switchPosition .y = switchPosition .endY
            switchPosition .startX = 0
            switchPosition .startY = 0
        })
        el.addEventListener('touchmove', function (e) {
            if (e.touches.length > 0) {
                let offsetX = e.touches[0].pageX - switchPosition .startX
                let offsetY = e.touches[0].pageY - switchPosition .startY
                let x = switchPosition .x - offsetX
                let y = switchPosition .y - offsetY
                if (x + el.offsetWidth > document.documentElement.offsetWidth) {
                    x = document.documentElement.offsetWidth - el.offsetWidth
                }
                if (y + el.offsetHeight > document.documentElement.offsetHeight) {
                    y = document.documentElement.offsetHeight - el.offsetHeight
                }
                if (x < 0) {
                    x = 0
                }
                if (y < 0) {
                    y = 0
                }
                el.style.right = x + 'px'
                el.style.bottom = y + 'px'
                switchPosition .endX = x
                switchPosition .endY = y
                e.preventDefault()
            }
        })
    }
})

使用

<template>
    <div>
        <h1 v-drag class="drag"></h1>
    </div>
</template>
<script>
export default {
    name: 'homePage',
    components:{
       
    },
    data() {
        return {
            
        }
    },
    created(){
    },
    computed:{
    },
    methods:{
      
    },
    mounted() {
        console.log(this.$el);
        // this.$el.style.backgroundColor = "green"
    },
}
</script>
<style lang="scss" scoped>

</style>
<style scoped>
.drag{
    width: 200px;
    height: 200px;
    background: #ccc;
    text-align: center;
    line-height: 200px;
    color: #fff;
    cursor:move;
    position: fixed;
    z-index: 99;
    right: 10px;
    bottom: 85px;
    width: 40px;
    height: 40px;
}
</style>

在这里插入图片描述

移动端上下左右滑长按

Vue.directive('touch', {
	// 滑动指令
    bind: function (el, binding, vnode) {
      // 传入参数滑动模式 press swipeRight swipeLeft swipeTop swipeDowm
      var touchType = binding.arg; 
      var timeOutEvent = 0;
      var direction = '';
      // 滑动处理
      var startX, startY;

      // 返回角度
      function GetSlideAngle(dx, dy) {
        return Math.atan2(dy, dx) * 180 / Math.PI;
      }

      // 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
      function GetSlideDirection(startX, startY, endX, endY) {
        var dy = startY - endY;
        var dx = endX - startX;
        var result = 0;

        // 判断滑动距离， 如果滑动距离太短
        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return result;
        }
		// 判断滑动角度
        var angle = GetSlideAngle(dx, dy);
        if (angle >= -45 && angle < 45) {
          result = 'swipeRight';
        } else if (angle >= 45 && angle < 135) {
          result = 'swipeUp';
        } else if (angle >= -135 && angle < -45) {
          result = 'swipeDown';
        }
        else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
          result = 'swipeLeft';
        }
        return result;
      }
      // 监听开始
      el.addEventListener('touchstart', function (ev) {
        startX = ev.touches[0].pageX;
        startY = ev.touches[0].pageY;

        //判断长按操作
        timeOutEvent = setTimeout(() =>{
          timeOutEvent = 0 ;
          if(touchType === 'press'){
              binding.value()
          }
        } , 500);

      }, false);
      
	  // 监听移动
      el.addEventListener('touchmove' , function (ev) {
        clearTimeout(timeOutEvent)
        timeOutEvent = 0;
      });
      
	  // 监听结束
      el.addEventListener('touchend', function (ev) {
        var endX, endY;
        endX = ev.changedTouches[0].pageX;
        endY = ev.changedTouches[0].pageY;
        direction = GetSlideDirection(startX, startY, endX, endY);

        clearTimeout(timeOutEvent)

        switch (direction) {
          case 0:
            break;
          case 'swipeUp':
            if(touchType === 'swipeUp'){
                binding.value()
            }
            break;
          case 'swipeDown':
            if(touchType === 'swipeDown'){
                binding.value()
            }
            break;
          case 'swipeLeft':
            if(touchType === 'swipeLeft'){
                binding.value()
            }
            break;
          case 'swipeRight':
            if(touchType === 'swipeRight'){
                binding.value()
            }
            break;
          default:
        }
  		}, false);
    }
})

使用指令

 <div
      v-touch:swipeLeft="leftSlide"
      v-touch:swipeRight="rightSlide"
      v-touch:swipeUp="upSlide"
      v-touch:swipeDown="downSlide"
      v-touch:press="press"
      class="slide"
  ></div>

   leftSlide() {
      console.log("左滑");
    },
    rightSlide() {
      console.log("右滑");
    },
    upSlide() {
      console.log("上滑");
    },
    downSlide() {
      console.log("下滑");
    },
    press() {
      console.log("长按");
    },

牛先森家的牛奶

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
6
评论
vue之自定义指令解析和实现拖拽和上下左右滑长按指令

vue的自定义指令font-size的设置PC端拖拽移动端拖拽注意点：bind 和 inserted共同点： dom插入都会调用，bind在inserted之前不同点： bind 时父节点为 null inserted 时父节点存在。 bind是在dom树绘制前调用，inserted在dom树绘制后调用bind: function (el) { console.log('bind',el.parentNode) // null},inserted: func
复制链接

扫一扫