在Vue2中，要实现ElementUI的el-dialog弹窗的拖拽功能，你可以使用第三方库，如vuedraggable，或者自己编写一个拖拽组件。以下是一个使用自定义拖拽功能实现弹窗宽度和高度适配，且在关闭后重新打开弹窗时能够记住其位置和大小的例子：
- 安装
vuedraggable库（如果选择自定义拖拽功能）:
npm install vuedraggable
- 在Vue组件中使用
el-dialog和拖拽功能:
<template>
<el-dialog
:visible.sync="dialogVisible"
:width="dialogWidth"
:height="dialogHeight"
@dragend="handleDragEnd"
>
<template slot="title">
<span :class="{ 'dialog-title-draggable': draggable }">{{ title }}</span>
</template>
<div v-if="draggable" class="dialog-draggable-handler" v-draggable="draggableOptions"></div>
<slot></slot>
</el-dialog>
</template>
<script>
export default {
props: {
title: String,
draggable: {
type: Boolean,
default: true
}
},
data() {
return {
dialogVisible: false,
dialogWidth: '50%',
dialogHeight: '50%',
draggableOptions: {
draggable: '.dialog-draggable-handler',
w: 100,
h: 100,
minw: 300,
minh: 200,
x: 0,
y: 0,
updatePosition: (position) => {
this.dialogWidth = `${position.width}px`;
this.dialogHeight = `${position.height}px`;
}
}
};
},
methods: {
handleDragEnd(event, data) {
this.draggableOptions.updatePosition(data);
}
}
};
</script>
<style>
.dialog-title-draggable {
cursor: move;
/* other styles */
}
.dialog-draggable-handler {
cursor: move;
height: 100%;
width: 100%;
/* other styles */
}
</style>
- 在你的主组件中使用这个带拖拽的弹窗组件:
<template>
<div>
<button @click="dialogVisible = true">打开弹窗</button>
<draggable-dialog :visible.sync="dialogVisible" title="可拖拽对话框">
这里是弹窗内容...
</draggable-dialog>
</div>
</template>
<script>
import DraggableDialog from './DraggableDialog.vue';
export default {
components: {
DraggableDialog
},
data() {
return {
dialogVisible: false
};
}
};
</script>
请注意，这个例子中的拖拽功能是一个简化版本，它不包括所有的边界检查和复杂的交互逻辑。你可以根据需要添加这些功能。