携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情
很多系统都会配有用户手册,支持预览与下载(将静态放在项目的public文件夹中,不是后端返回) el-dialog + iframe 配合使用即可
代码部分:
<el-dialog
title="操作手册"
:visible.sync="dialogVisible"
fullscreen="true"
style="z-index: 999; height: 100%; text-align: center"
>
<div style="position: absolute; top: 54px; right: 0; bottom: 6px; left: 0">
<div style="height: 100%">
<iframe
:src="pdfUrl"
type="application/x-google-chrome-pdf"
width="100%"
frameborder="0"
scrolling="auto"
style="height: 90vh"
/>
</div>
</div>
</el-dialog>
data中定义变量:
data() {
return {
dialogVisible: false,
pdfUrl: '/XXXXX.pdf'
}
},
css样式:(模态框全屏展示是title的文字背景样式)
::v-deep .el-dialog__header {
background-color: rgb(181, 196, 241);
font-weight: bold;
.el-dialog__title {
color: #fff;
}
}
注意各个标签高度的添加
效果图: