<template>
<div ref="pageDiv">
<!-- 编辑弹窗 -->
<a-modal :wrap-class-name="isFullscreen ? 'full-modal' : ''" :get-container="() => $refs.pageDiv"
:visible="visible" @ok="saveData" @cancel="cancelData">
<template #title>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>标题</span>
<a-button style="margin-right: 50px;" type="text" @click="toggleFullscreen">
{{ isFullscreen ? '退出全屏' : '全屏' }}
</a-button>
</div>
</template>
<div>134</div>
</a-modal>
</div>
</template>
<script>
export default {
data() {
return {
isFullscreen: false,
visible: false,
};
},
methods: {
saveData() {
this.visible = false
},
cancelData() {
this.visible = false
},
toggleFullscreen() {
this.isFullscreen = !this.isFullscreen
},
}
};
</script>
<style lang="less" scoped>
::v-deep .full-modal {
.ant-modal {
max-width: 100%;
width: 100vw !important;
top: 0;
padding-bottom: 0;
margin: 0;
}
.ant-modal-content {
height: 100vh;
display: flex;
flex-direction: column;
}
.ant-modal-body {
flex: 1;
max-height: 100vh !important;
}
}
</style>
10-30
1560
10-28
7544