解决饿了么ui的el-dialog对话框移动问题

原创

于 2023-08-15 13:11:40 发布 · 517 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

本文介绍了如何在Vue项目中创建一个名为dialogDrag的自定义指令，实现弹窗元素的拖拽功能，并在main.js中引入和在el-dialog标签上使用。涉及CSS样式调整和鼠标事件处理。

1.我们在src下创建一个目录叫 utils
在下面创建一个文件叫 directives.js 参考代码如下

import Vue from 'vue';
 
// v-dialogDrag: 弹窗拖拽属性
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    const dragDom = el.querySelector('.el-dialog');
    //dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'
 
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = (function() {
        if (window.document.currentStyle) {
            return (dom, attr) => dom.currentStyle[attr];
        } else{
            return (dom, attr) => getComputedStyle(dom, false)[attr];
        }
    })()    
 
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;
 
      const screenWidth =