需求:将后端返回来的文字或者图片和视频展示在页面上。
<!-- 预览 -->
<el-dialog title="预览" :visible.sync="dialogPreviewVisible" width="50%" append-to-body :close-on-click-modal="false" @close="PreviewClose">
<div style="margin-bottom:5%">
<h1>{{previewTitle}}</h1>
</div>
<div class="content" v-html="previewContent">
</div>
</el-dialog>
// 预览事件
previewButton(row){
let _this = this;
let isNull = validatenull;
getDetails(row.id).then((res)=>{
if(res.data.code == 0){
_this.dialogPreviewVisible = true;
console.log(res.data.data,'预览');
_this.previewTitle = res.data.data.title
_this.previewContent = res.data.data.content
console.log(res.data.data.content,'66666');
}
})
},
<style scoped lang="scss">
.titleClass{
display:flex;
justify-content: center;
}
.content{
/deep/ p{
img{
width: 100% !important;
}
}
/deep/ .ql-video{
position: static;
}
}
</style>