快捷導(dǎo)航

vue/Element?UI實(shí)現(xiàn)Element?UI?el-dialog自由拖動(dòng)功能實(shí)現(xiàn)

更新時(shí)間：2023年06月16日 10:17:19 作者：迷知返

最近工作上需要在el-dialog基礎(chǔ)上進(jìn)行些功能的改動(dòng),下面這篇文章主要給大家介紹了關(guān)于vue/Element?UI實(shí)現(xiàn)Element?UI?el-dialog自由拖動(dòng)功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下

前言：

最近有個(gè)項(xiàng)目，客戶要求彈窗可拖動(dòng)，但是由于elemen ui本身的彈窗并沒(méi)有拖動(dòng)的屬性，無(wú)法滿足客戶的需求。

于是我百度找到了幾篇文章，終于可以實(shí)現(xiàn)客戶的需求！

請(qǐng)往下看↓↓

一、新建一個(gè)目錄：utils

二、創(chuàng)建drag .js文件

/**
 * 拖拽移動(dòng)
 * @param  {elementObjct} bar 鼠標(biāo)點(diǎn)擊控制拖拽的元素
 * @param {elementObjct}  target 移動(dòng)的元素
 * @param {function}  callback 移動(dòng)后的回調(diào)
 */
export function startDrag(bar, target, callback) {
    var params = {
      top: 0,
      left: 0,
      currentX: 0,
      currentY: 0,
      flag: false,
      cWidth: 0,
      cHeight: 0,
      tWidth: 0,
      tHeight: 0
    };
   
    // 給拖動(dòng)塊添加樣式
    bar.style.cursor = 'move';
   
    // 獲取相關(guān)CSS屬性
    // o是移動(dòng)對(duì)象
    // var getCss = function (o, key) {
    //   return o.currentStyle ? o.currentStyle[key] :             document.defaultView.getComputedStyle(o, false)[key];
    // };
   
    bar.onmousedown = function (event) {
      // 按下時(shí)初始化params
      var e = event ? event : window.event;
      params = {
        top: target.offsetTop,
        left: target.offsetLeft,
        currentX: e.clientX,
        currentY: e.clientY,
        flag: true,
        cWidth: document.body.clientWidth,
        cHeight: document.body.clientHeight,
        tWidth: target.offsetWidth,
        tHeight: target.offsetHeight
      };
   
      // 給被拖動(dòng)塊初始化樣式
      target.style.margin = 0;
      target.style.top = params.top + 'px';
      target.style.left = params.left + 'px';
   
      if (!event) {
        // 防止IE文字選中
        bar.onselectstart = function () {
          return false;
        }
      }
   
      document.onmousemove = function (event) {
        // 防止文字選中
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
   
        var e = event ? event : window.event;
        if (params.flag) {
          var nowX = e.clientX;
          var nowY = e.clientY;
          // 差異距離
          var disX = nowX - params.currentX;
          var disY = nowY - params.currentY;
          // 最終移動(dòng)位置
          var zLeft = 0;
          var zTop = 0;
   
          zLeft = parseInt(params.left) + disX;
          // 限制X軸范圍
          if (zLeft <= -parseInt(params.tWidth / 2)) {
            zLeft = -parseInt(params.tWidth / 2);
          }
          if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) {
            zLeft = params.cWidth - parseInt(params.tWidth * 0.5);
          }
   
          zTop = parseInt(params.top) + disY;
          // 限制Y軸范圍
          if (zTop <= 0) {
            zTop = 0;
          }
          if (zTop >= params.cHeight - parseInt(params.tHeight * 0.5)) {
            zTop = params.cHeight - parseInt(params.tHeight * 0.5);
          }
   
          // 執(zhí)行移動(dòng)
          target.style.left = zLeft + 'px';
          target.style.top = zTop + 'px';
        }
   
        if (typeof callback == "function") {
          callback(zLeft, zTop);
        }
      }
   
      document.onmouseup = function () {
        params.flag = false;
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }

三、創(chuàng)建directive.js 文件

// 引入拖拽js
import { startDrag } from './drag.js'
 
/**
 * 為el-dialog彈框增加拖拽功能
 * @param {*} el 指定dom
 * @param {*} binding 綁定對(duì)象
 * desc   只要用到了el-dialog的組件，都可以通過(guò)增加v-draggable屬性變?yōu)榭赏献У膹椏?
 */
const draggable = (el, binding) => {
    // 綁定拖拽事件 [綁定拖拽觸發(fā)元素為彈框頭部、拖拽移動(dòng)元素為整個(gè)彈框]
    startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
};
 
const directives = {
    draggable,
};
// 這種寫法可以批量注冊(cè)指令
export default {
  install(Vue) {
      Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

四、main.js文件中全局引入vue指令

全局注冊(cè)

import directive from './utils/directive'
Vue.use(directive)

五、使用v-draagble

在頁(yè)面上使用v-draagble

好了，經(jīng)過(guò)以上的幾步，已經(jīng)可以實(shí)現(xiàn)拖動(dòng)功能了！

如果有不同看法，歡迎留言交流，謝謝?。?/p>

下面是一個(gè)博主的文章，大家不懂也可以參考一下

參考鏈接：http://www.fzitv.net/article/234469.htm

總結(jié)

到此這篇關(guān)于vue/Element UI實(shí)現(xiàn)Element UI el-dialog自由拖動(dòng)功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Element UI el-dialog自由拖動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: