elementplus 可拖拽弹出框 dialog;
https://juejin.cn/post/7132727555487957022 实现代码
求教大佬, 我在el-dialog外面包裹了一层,实现dialog的拖动效果;
正常在2.7.8版本的elementplus中 可以获取到dialog的el元素如下图
但是在新版本2.8.8 和 2.9.7中获取不到 el 元素,导致拖动效果失效.
初步怀疑和 el-dialog teleport 有关 ;求大佬解答
初步怀疑和 el-dialog teleport 有关 ;求大佬解答
参考一下这个，可以实现拖拽，从右下角拖拽改变大小。
https://juejin.cn/post/7287618489954877495
我也实现了一个demo：
极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Resizable Dialog Demo</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<style>
.dialogContainer {
position: relative;
}
.el-dialog {
position: absolute !important;
margin: 0 !important;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module">
const { createApp, ref } = Vue
const vResizer = {
updated(el) {
let minWidth = 1000;
let minHeight = 300;
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dragDom.style.overflow = "auto";
dialogHeaderEl.onselectstart = () => false;
dialogHeaderEl.style.cursor = 'move';
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
let moveDown = (e) => {
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
let styL = +sty.left.replace(/px/g, '');
let styT = +sty.top.replace(/px/g, '');
document.onmousemove = function (e) {
const l = e.clientX - disX;
const t = e.clientY - disY;
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
}
dialogHeaderEl.onmousedown = moveDown;
// 创建一个拉伸块的函数（右下角）
function createResizeHandle(cursor, styles, onMouseMoveHandler) {
const handle = document.createElement("div");
Object.assign(handle.style, {
position: 'absolute',
zIndex: '99',
...styles,
cursor
});
dragDom.appendChild(handle);
handle.onmousedown = (e) => {
document.onmousemove = (ev) => {
ev.preventDefault();
onMouseMoveHandler(ev, e);
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
// 示例：右下角拖拽
createResizeHandle('se-resize', {
width: '10px',
height: '10px',
right: '0px',
bottom: '0px'
}, (ev, e) => {
let width = ev.clientX - dragDom.getBoundingClientRect().left;
let height = ev.clientY - dragDom.getBoundingClientRect().top;
dragDom.style.width = width > minWidth ? width + 'px' : minWidth + 'px';
dragDom.style.height = height > minHeight ? height + 'px' : minHeight + 'px';
});
}
}
createApp({
setup() {
const dialogVisible = ref(false)
return { dialogVisible }
},
directives: {
resizer: vResizer
},
template: `
<el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>
<div class="dialogContainer" v-show="dialogVisible" v-resizer>
<el-dialog
v-model="dialogVisible"
title="可拉伸弹窗"
:modal="false"
width="1000px"
top="100px"
>
<p>你可以拖动标题栏移动弹窗，或从右下角拖拽改变大小。</p>
</el-dialog>
</div>
`
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>
4 回答4.6k 阅读✓ 已解决
4 回答2.1k 阅读✓ 已解决
4 回答2.1k 阅读✓ 已解决
3 回答1.9k 阅读✓ 已解决
3 回答5k 阅读
2 回答2.6k 阅读✓ 已解决
2 回答2k 阅读✓ 已解决
Ele+ 的 Dialog 组件不是自己就有一个
draggable属性吗？我看2.8.8版本是支持的呀，为啥要自己实现？Dialog 对话框 | Element Plus