vue element-ui 弹窗 实现点击右上角点击减小按钮把弹窗缩小化成只有放大和关闭按钮的浮窗,浮窗点击放大可以还原弹窗原来大小,请用代码来实现
时间: 2024-02-26 10:56:51 浏览: 174
好的,下面是一个简单的实现方式,仅供参考:
```html
<template>
<el-dialog
title="弹窗标题"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:show-close="false"
:before-close="handleClose"
:modal-append-to-body="false"
:width="dialogWidth"
:height="dialogHeight"
:style="{visibility: isMinimized ? 'hidden' : 'visible'}"
>
<!-- 弹窗内容 -->
<p>这里是弹窗内容</p>
<div slot="footer">
<el-button @click="handleMinimize">最小化</el-button>
<el-button @click="dialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<!-- 浮窗 -->
<div
class="dialog-float"
v-show="isMinimized"
@click="handleRestore"
>
<i class="el-icon-full-screen"></i>
<i class="el-icon-close"></i>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
dialogWidth: '50%',
dialogHeight: '50%',
isMinimized: false,
savedSize: {
width: '50%',
height: '50%',
},
};
},
methods: {
handleMinimize() {
this.isMinimized = true;
this.savedSize.width = this.dialogWidth;
this.savedSize.height = this.dialogHeight;
this.dialogWidth = 'auto';
this.dialogHeight = 'auto';
},
handleRestore() {
this.isMinimized = false;
this.dialogWidth = this.savedSize.width;
this.dialogHeight = this.savedSize.height;
},
handleClose(done) {
if (this.isMinimized) {
this.isMinimized = false;
done(false); // 取消关闭
} else {
done(); // 关闭弹窗
}
},
},
};
</script>
<style scoped>
.dialog-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
background-color: #fff;
border: 1px solid #ccc;
display: flex;
justify-content: space-around;
align-items: center;
width: 100px;
height: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s;
}
.dialog-float:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}
</style>
```
需要注意的是,由于 Vue 的限制,弹窗的 `width` 和 `height` 不能直接设置为 `'auto'`,所以我们需要在代码中保存弹窗原来的大小,在最小化时将 `width` 和 `height` 设置为 `'auto'`,在恢复时再设置回去。同时,在关闭弹窗时需要判断当前是否处于最小化状态,如果是则取消关闭操作,否则关闭弹窗。
阅读全文