关于element功能dialog弹框全屏功能
代码如下
html
<el-dialog :visible.sync="imgVisible" class="publish-dialog" width="820px" ref="imgDialog">
<template #title>
<span>修改图片-{{imgtion.sellerSku}}</span>
<span class="zoom-btn" @click="zoomEvent">
<img src="@/assets/images/zoom.svg">
</span>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="imgVisible=false" size="mini">取 消</el-button>
<el-button type="primary" @click="handImgs" size="mini">确 定</el-button>
</div>
</el-dialog>
js
zoomEvent() {
const dialogEl = this.$refs.imgDialog.$refs.dialog
console.log(dialogEl)
if (dialogEl.hasAttribute('zoom')) {
dialogEl.removeAttribute('zoom')
} else {
dialogEl.setAttribute('zoom', 'max')
}
}
css
.zoom-btn {
position: absolute;
right: 42px;
top: 17px;
height: 20px;
width: 20px;
text-align: center;
cursor: pointer;
img {
width: 14px;
}
}
.publish-dialog {
/deep/ .el-dialog {
&[zoom="max"] {
width: 100% !important;
height: 100% !important;
margin-top: 0 !important;
}
}
}