Vue3自定义指令

最新推荐文章于 2024-07-19 10:30:06 发布

前端搬砖人~

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量59

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_69810742/article/details/133706627

版权

拖拽

//抽离成单独文件
export default {
    // beforeMount(el,binding){
    //     console.log('beoreMount==',el,binding);
    // },
    // mounted(el,binding){
    //     console.log('el===',binding);
    // },
    // beforeUpdate(el){
    //     console.log('beforeUpdate==',el);
    // },
    // updated(){
    //     console.log('updated==');
    // },
    // beforeUnmount(el){
    //     console.log('beforeUnmount==');
    // },
    // unmounted(){
    //     console.log('unmounted==');
    // }
    beforeMount(el) {
        el.style.position = 'absolute';
      },
    
      mounted(el) {
        let isDragging = false;
        let currentX, currentY, initialX, initialY;
    
        const onMouseDown = (e) => {
          initialX = e.clientX - el.offsetLeft;
          initialY = e.clientY - el.offsetTop;
          isDragging = true;
        };
    
        const onMouseMove = (e) => {
          if (isDragging) {
            e.preventDefault();
            currentX = e.clientX - initialX;
            currentY = e.clientY - initialY;
    
            el.style.left = `${currentX}px`;
            el.style.top = `${currentY}px`;
          }
        };
    
        const onMouseUp = () => {
          isDragging = false;
        };
    
        el.addEventListener('mousedown', onMouseDown);
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
      },
    
      beforeUnmount(el) {
        el.removeEventListener('mousedown', onMouseDown);
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      },
}




----- 在main.js里面注册
import Drag from './utils/drag.js';
import Author from './utils/author.js';
let app = createApp(App)

app.directive('drag',Drag);
app.directive('author',Author);

按钮权限验证

export default {
    // beforeMount (el,binding) {
    //     console.log(binding);
    // },
    mounted (el,binding) {
        let token = localStorage.getItem('tokens');
        if(!token){
            el.parentNode.removeChild(el);
        }
        // console.log(el.parentNode.removeChild(el));
    }
}

实现图片懒加载

export default {
    mounted (el,binding) {
        let imgSrc = binding.value;
        console.log(window.innerHeight);
        window.addEventListener('scroll', function(e){
            let top = el.getBoundingClientRect().top;
            if(top <= window.innerHeight){
                el.src = imgSrc;
            }
            console.log(el.getBoundingClientRect().top);
        })
    }
}

// 需要传递参数；图片的真实地址
<img v-lazy="'https://img0.baidu.com/it/u=3368678403,249914024&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'" alt="">