fullscreen:是否为全屏 Dialog
<template>
<div class="hello">
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
:visible.sync="dialogVisible"
:fullscreen="dialogFullScreen"
:class="[dialogFullScreen ? 'fullscreen' : 'no_fullscreen']"
>
<template slot="title">
<div class="custom_dialog_header">
<span class="el_dialog_title">标题</span>
<div class="custom_dialog_menu" @click="dialogFullScreen = !dialogFullScreen">
<i class="el-icon-full-screen"></i>
</div>
</div>
</template>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "fullSreen",
data() {
return {
dialogVisible: false,
dialogFullScreen: false
};
},
methods: {}
};
</script>
<style lang="scss" scoped>
.fullscreen {
/deep/ .el-dialog {
width: 100%;
}
}
.no_fullscreen {
/deep/ .el-dialog {
width: 40%;
}
}
/deep/ .custom_dialog_header {
display: flex;
justify-content: space-between;
}
/deep/ .custom_dialog_menu {
padding: 6px 30px 0 0;
}
/deep/ .custom_dialog_menu i {
color: #909399;
font-size: 15px;
}
/deep/ .el-icon-full-screen {
cursor: pointer;
}
</style>