vue3自定义指令

前言

　　很多时候我们写的方法是通用的，这个时候根据使用场景可以选择放在js或者ts文件并让其他文件引入使用，但如果是对现有组件添加新功能的话，还是建议用自定义指令更方便。

 

设置v-draggin来操作dom元素的拖拽

1. 在main.js 全局添加自定义指令

　　

const app = createApp(App)

app.directive('dragging',{
    mounted(el, binding, vnode) {
        // console.log(el, binding, vnode);

        el.addEventListener('mousedown', (e:any) => {
            // console.log(e);
            let ol = e.clientX - el.offsetLeft;
            let ot = e.clientY - el.offsetTop;

            // 给document绑定一个onmousemove事件
          document.onmousemove = function(e2:any) {
            e2 = e2 || window.event;
            let left = e2.clientX - ol;
            let top = e2.clientY - ot;
   
            //修改el的位置
            el.style.left = left + "px";
            el.style.top = top + "px";
          };
   
          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        })
    }
});

　　

2. 在需要使用拖拽功能的dom元素上添加v-dragging

<div id="imgId" width="125" height="125" v-dragging ></div>

<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" v-dragging />

　　

如果需要在UI组件例如ant vue这样的使用，则需要修改代码

main.ts ：

const app = createApp(App)

app.directive('dragging',{
    mounted(el, binding, vnode) {
        // console.log(el, binding, vnode);
        el = el.parentNode.parentElement; //定位到父级元素

        el.addEventListener('mousedown', (e:any) => {
            // console.log(e);
            let ol = e.clientX - el.offsetLeft;
            let ot = e.clientY - el.offsetTop;

            // 给document绑定一个onmousemove事件
          document.onmousemove = function(e2:any) {
            e2 = e2 || window.event;
            let left = e2.clientX - ol;
            let top = e2.clientY - ot;
   
            //修改el的位置
            el.style.left = left + "px";
            el.style.top = top + "px";
          };
   
          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        })
    }
});

　页面内：

<a-button type="primary" @click="showModal">Open Modal {{ visible }} </a-button>

<a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk" >
    <p v-dragging>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</a-modal>

　　效果图：