随笔 - 73, 文章 - 0, 评论 - 6, 阅读 - 91554

前言

　　很多时候我们写的方法是通用的，这个时候根据使用场景可以选择放在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>