在项目中使用el-dialog中发现不能够拖拽移动,因此网上找了相关资料,使用自定义指令实现拖拽功能。
1、创建自定义指令:
新建文件directive/el-drag-dialog/index.js
import drag from "./drag"; const install = function (Vue) { Vue.directive("el-drag-dialog", drag); }; if (window.Vue) { window["el-drag-dialog"] = drag; Vue.use(install); } drag.install = install; export default drag;
新建文件directive/el-drag-dialog/drag.js
export default { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector(".el-dialog__header"); const dragDom = el.querySelector(".el-dialog"); dialogHeaderEl.style.cssText += ";cursor:move;"; dragDom.style.cssText += ";top:0px;"; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const getStyle = (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 dragDomWidth = dragDom.offsetWidth; const dragDomheight = dragDom.offsetHeight; const screenWidth = document.body.clientWidth; const screenHeight = document.body.clientHeight; const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; // 获取到的值带px 正则匹配替换 let styL = getStyle(dragDom, "left"); let styT = getStyle(dragDom, "top"); if (styL.includes("%")) { styL = +document.body.clientWidth * (+styL.replace(/%/g, "") / 100); styT = +document.body.clientHeight * (+styT.replace(/%/g, "") / 100); } else { styL = +styL.replace(/\px/g, ""); styT = +styT.replace(/\px/g, ""); } document.onmousemove = function (e) { // 通过事件委托,计算移动的距离 let left = e.clientX - disX; let top = e.clientY - disY; // 边界处理 if (-left > minDragDomLeft) { left = -minDragDomLeft; } else if (left > maxDragDomLeft) { left = maxDragDomLeft; } if (-top > minDragDomTop) { top = -minDragDomTop; } else if (top > maxDragDomTop) { top = maxDragDomTop; } // 移动当前元素 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; // emit onDrag event vnode.child.$emit("dragDialog"); }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; }; }, };
2、引入自定义指令
文章来源:https://www.toymoban.com/news/detail-525073.html
import elDragDialog from "@/directive/el-drag-dialog";
directives: {
elDragDialog
},
3、使用自定义指令(v-el-darg-dialog)
<el-dialog v-el-drag-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" v-if="dialogVisible" > <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false" >确 定</el-button > </span> </el-dialog>
其中v-el-drag-dialog为自定义指令,v-if主要为了处理每次打开弹框都在中间位置。
4、完整代码:
<template> <div> <el-button @click="dialogVisible = true">打开弹框</el-button> <el-dialog v-el-drag-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" v-if="dialogVisible" > <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false" >确 定</el-button > </span> </el-dialog> </div> </template> <script> import elDragDialog from "@/directive/el-drag-dialog"; export default { name: "DialogView", directives: { elDragDialog, }, data() { return { dialogVisible: false, }; }, methods: { handleClose() { this.dialogVisible = false; }, }, }; </script>
5、效果
文章来源地址https://www.toymoban.com/news/detail-525073.html
到了这里,关于ElementUI的Dialog弹窗实现拖拽移动功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!