找到
Dialog
控件部分后把下面的样式属性一个一个全部取消后发现是因为.
el
-
dialog
_body 这个class里面的max height:calc(90vh-111px)!important;通过全局检索找到
el
ement-ui.scss 这个文件里面的这个属性 然后修改。多次测试目前没有找到有效的解决方案(不改动源码的情况下)通过修改源码的方式解决问题。
// v-
dialog
Drag: 弹窗
拖拽
属性
Vue.directive('
dialog
Drag', {
bind(
el
, binding, vnode, oldVnode) {
const
dialog
Header
El
=
el
.queryS
el
ector('.
el
-
dialog
__header');
const dragDom =
el
.queryS
el
ector('.
el
-
dialog
');
//
dialog
Header
El
...
export function init
Dialog
Height() {
let h = initLayoutInfo().height;
let devicePix
el
Ratio = window.devicePix
el
Ratio...
const bus = require("vue3-eventbus")
const
dialog
Drag = (app) => {
app.directive('
dialog
drag', {
// 渲染完毕
mounted(
el
) {
记录一下如何让
el
ement-plus1.x版本的
dialog
支持
拖拽
移动(
el
ement-plus2.0.0版本开始已经支持draggable属性),添加class为no-drag可手动禁止拖动,否则默认全部
dialog
都支持窗口内
拖拽
移动。
let draging = false;
let dragDom: HTML
El
ement | null;
let dragpoint: { x: number, y: number };
function handleMouseUp() {
draging = false;
dragDom = null;
function handleMousemove(ev: MouseEvent) {
if (draging) {
let _dr
https://www.zhihu.com/zvideo/1380450791975731200
Step1 建立一个js文件
const
dialog
Drag = (app) => {
app.directive('
dialog
drag', {
// 渲染完毕
mounted(
el
) {
// 可视窗口的宽度
const clientWidth = document.document
El
ement.clientWidth
* 将以下代码复制到一个js文件中,然后在入口文件main.js中import引入即可;
* 给
elementUI
的
dialog
上加上 v-
dialog
Drag 指令就可以
实现
弹窗的
全屏
和
拉伸
了。
/ 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);// 鼠标按下,计算当前元素距离可视区的距离。// 通过事件委托,计算移动的距离。// 获取到的值带px 正则匹配替换。
1、准备:在准备一个vue组件(点击按钮
弹出
对话框):在vue组件中添加**v-
dialog
Drag**属性
//自定义指令: v-
dialog
Drag
//点击遮罩
层
关闭对话框: close-on-click-modal
<
el
-
dialog
v-
dialog
Drag :close-on-click-modal="false" title="我是标题" :visible.sync="mipLightbox"></
el
-
dialog
>
2、自定义指令:在src/assrts
1.
el
-
dialog
中添加 :close-on-click-modal="false"可以防止点击空白处弹框自动关闭
<
el
-
dialog
:title="‘设置分析条件’" v-if=“
dialog
FormVisible” v-
dialog
Drag :visible.sync=“
dialog
FormVisible”
id=“face_
dialog
-user” :close-on-c...