预览功能实现

需求:将后端返回来的文字或者图片和视频展示在页面上。

        <!-- 预览 --><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.contentconsole.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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/224668.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET6实现破解Modbus poll点表配置文件

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !序言 Modbus 协议是工控领域常见…

如何使用 Java 在Excel中创建下拉列表

下拉列表&#xff08;下拉框&#xff09;可以确保用户仅从预先给定的选项中进行选择&#xff0c;这样不仅能减少数据输入错误&#xff0c;还能节省时间提高效率。在MS Excel中&#xff0c;我们可以通过 “数据验证” 提供的选项来创建下拉列表&#xff0c;但如果要在Java程序中…

通过预定义颜色查找表上色_vtkLookupTable_vtkColorTransferFunction

开发环境&#xff1a; Windows 11 家庭中文版Microsoft Visual Studio Community 2019VTK-9.3.0.rc0vtk-example demo解决问题&#xff1a;通过颜色查找表给vtkPlaneSource上色 第一种技术是使用预定义颜色的查找表vtkLookupTable。这包括创建一个查找表并为其分配一组已命名的…

ctfshow刷题web入门--1--ljcsd

文章目录 ctf.show。信息搜集web1web2web3web4web5web6web7web8web9web10web11web12web13web14web15web16web17web18web19web20。爆破。知识1.1 播种随机数生成器-mt_srand。参考web21--重点web22--做不出来web23web24web25web26web27web28。。。命令执行。知识1 绕过正则表达式…

基础课12——深度学习

深度学习技术是机器学习领域中的一个新的研究方向&#xff0c;它被引入机器学习使其更接近于最初的目标——人工智能。深度学习的最终目标是让机器能够像人一样具有分析学习能力&#xff0c;能够识别文字、图像和声音等数据。 深度学习的核心思想是通过学习样本数据的内在规律…

skywalking告警UI界面有告警信息,webhook接口没有回调,400错误

400错误就是回调接口返回数据的属性对应不上 PostMapping(“/webhook”) public void webhook(RequestBody List alarmMessageList) 自定义的实体类AlarmMessage有问题 只能去官网找了 告警实体类官网 Getter EqualsAndHashCode RequiredArgsConstructor NoArgsConstructor(fo…

Vue基础入门(三):Vue3的使用

Vue3的使用 一、首页案例修改 修改首页的信息&#xff1a;是在之前介绍的HelloWorld.vue文件中进行内容的修改。 页面展示效果&#xff1a; 此时就看到了我们新添加的文字了&#xff01; 同样的我们开发代码的时候只需要修改了项目中的内容然后保存就会自动刷新的浏览器&…

如何确定先做哪件事情。

问题描述&#xff1a;工作或者生活中&#xff0c;有许多件事情&#xff0c;我们应该先做那件事情。 解决办法&#xff1a;重要紧急的四象限法则。具体如下所示&#xff1a; -----------------------------------------------------------------------------------------------…

使用elementPlus去除下拉框蓝色边框

// 下拉框去除蓝色边框 .el-select {--el-select-input-focus-border-color: none !important; }

汽车电子 -- 车载ADAS之RCTA(后方横向来车预警 )

国际标准: RCTA: GB/T XXXXX—XXXX 乘用车后部交通穿行提示系统性能要求及试验方法 一、后方横向来车预警RCTA&#xff08; Rear Cross Traffic Assist&#xff09; 在车辆倒车时&#xff0c;实时监测车辆后方横向接近的其它道路使用者&#xff0c;并在可能发生碰撞危险时发…

微信小程序推送服务号消息(一)【Go+微信小程序+微信服务号+微信开放平台】

一、需求场景 业务需要给微信小程序用户在某些场景推送微信服务号消息&#xff0c;例如&#xff1a;订单即将超时&#xff0c;电子合同签约超时等&#xff1b; 二、开发准备 1、开通微信服务号 入口&#xff1a;微信公众平台 1.1 在服务号中获取推送消息所需的配置信息&#…

springboot实现验证码功能

转载自 : www.javaman.cn 1、编写工具类生成4位随机数 该工具类主要生成从0-9&#xff0c;a-z&#xff0c;A-Z范围内产生的4位随机数 /*** 产生4位随机字符串*/public static String getCheckCode() {String base "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmn…