vue3创建自定义指令的方法

2021-07-26

用vue.cli写vue文件时需要使用到vue中的自定义指令，在网上找了很久但始终找到的都是vue2的方法，鼓捣了好几个小时才找到了局部和全局的自定义指令，在此记录一下

局部自定义指令···

1
2
3

dicrective:{

}

全局创建自定义指令

const app = createApp(App)
app.directive("drag",
    (el) => {
        let _el = el;
        document.onselectstart = function() {
            return false; //禁止选择网页上的文字
        };
        _el.onmousedown = (e) => {
            let disX = e.clientX - _el.offsetLeft; //鼠标按下，计算当前元素距离可视区的距离
            let disY = e.clientY - _el.offsetTop;
            document.onmousemove = function(e) {
                let l = e.clientX - disX;
                let t = e.clientY - disY;
                _el.style.left = l + "px";
                _el.style.top = t + "px";
            };
            document.onmouseup = () => {
                document.onmousemove = document.onmouseup = null;
            };
            return false;
        };
    }
)
app.mount('#app')

注意！！！！

以钩子函数开头

参考: 官方文档：自定义指令 | Vue.js (vuejs.org)

菜鸟教程：Vue3 自定义指令 | 菜鸟教程 (runoob.com)