预览功能实现

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【分享】centos7vim异常

问题描述: 虚拟机安装centos7&#xff0c;安装vim后异常&#xff0c;上下左右键会变成abcd,退格键无法删除。 系统版本: CentOS Linux release 7.5.1804 (Core) 原因: 暂时未知&#xff0c;有可能是vim安装时&#xff0c;一个组件未安装导致。后续追溯 解决方案: echo &quo…

国际上有哪些比较出名的VOIP供应商

1. Skype&#xff08;微软&#xff09;&#xff1a;企业发展历程&#xff1a;Skype 于2003年成立&#xff0c;最初由瑞典和丹麦的几位开发者创建。2005年被eBay收购&#xff0c;之后于2011年被微软收购。微软将 Skype 合并到其产品生态系统&#xff0c;并继续开发和改进该平…

Whisper

文章目录 使后感Paper Review个人觉得有趣的Log Mel spectrogram & STFT Trainingcross-attention输入cross-attention输出positional encoding数据 Decoding为什么可以有时间戳的信息 Test code 使后感 因为运用里需要考虑到时效和准确性&#xff0c;类似于YOLO&#xff…

库位角点检测之Centernet/CornerNet算法

1.CornerNet CornerNet 那么我们从bounding box左上角(top-left corner)看物体。视线横着的话&#xff0c;物体就在视线的下面&#xff08;那么视线所在位置为the topmost boundary of an object&#xff09;。视线竖着的话&#xff0c;物体就在视线的右边&#xff0c;那么视线…

Electron+Ts+Vue+Vite桌面应用系列:TypeScript常用语法详解

文章目录 1️⃣ TypeScript常用讲解1.1 使用1.2 字符串1.3 数字1.3 布尔1.4 数组1.5 元组1.6 枚举1.7 any1.8 void1.9 object1.10 函数指定返回值的类型1.11 联合类型1.12 类型断言1.13 接口1.14 函数类型1.15 类类型1.16 泛型 2️⃣ 类2.1 类的基本写法2.2 类的继承2.3 类的修…

建设银行RPA应用实践

当下&#xff0c;银行业正在从“互联网金融”时代向“新科技金融”时代迈进&#xff0c;在目前经济形势严峻、人力成本持续增加的经营背景下&#xff0c;以科技解放人力将是智能化银行发展的必然趋势。RPA技术为解决上述问题提供了崭新的路径。 RPA&#xff08;机器人流程自动…

vue3(三)-基础入门之v-model双向绑定、v-model修饰符

一、v-model 双向绑定 监听用户的输入事件来实时更新数据&#xff0c;多用于表单 input、textarea以及select元素上 <div id"app"><input type"text" v-model"myInputText" /><!-- 等价于&#xff1a; --><input type&qu…

【动态规划】LeetCode-63.不同路径II

&#x1f388;算法那些事专栏说明&#xff1a;这是一个记录刷题日常的专栏&#xff0c;每个文章标题前都会写明这道题使用的算法。专栏每日计划至少更新1道题目&#xff0c;在这立下Flag&#x1f6a9; &#x1f3e0;个人主页&#xff1a;Jammingpro &#x1f4d5;专栏链接&…

深度学习(一):Pytorch之YOLOv8目标检测

1.YOLOv8 2.模型详解 2.1模型结构设计 和YOLOv5对比&#xff1a; 主要的模块&#xff1a; ConvSPPFBottleneckConcatUpsampleC2f Backbone ----->Neck------>head Backdone 1.第一个卷积层的 kernel 从 6x6 变成了 3x3 2. 所有的 C3 模块换成 C2f&#xff0c;可以发现…

蓝桥杯算法心得——小郑躲太阳(思维推导)

大家好&#xff0c;我是晴天学长&#xff0c;一道与平时的题型截然不同的题型&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .小郑躲太阳 问题描述 小郑一觉醒来发现起晚啦!现在需要从家里飞速前往公司…

SD-WAN组网中的CPE及云服务CPE部署方法

什么是CPE&#xff1f; CPE全称为Customer Premises Equipment&#xff0c;即客户端设备&#xff0c;在SD-WAN中通常为路由器&#xff0c;部署在中心点和分支上&#xff0c;提供连接和路由、协议转换、流量监控等功能。一般可分为硬件CPE和虚拟化CPE&#xff08;virtual CPE&a…

解锁创新力:深度剖析知识付费系统源码及关键技术实现

在知识付费的浪潮中&#xff0c;构建一个稳健高效的系统源码是创新和成功的关键。本文将深入探讨知识付费系统的核心源码和一些关键技术实现&#xff0c;为开发者提供有力的指导和灵感。 1. 构建基础&#xff1a;系统框架 在知识付费系统中&#xff0c;系统框架的选择至关重…

编译原理:设计与实现一个简单词法分析器

设计与实现一个简单词法分析。具体内容是产生一个二元式文本文件&#xff0c;扩展名为dyd&#xff0c;可将Java或C程序(测试程序)分解成为一个一个的单词及类型。 &#xff08;选做&#xff1a;并查“单词符号与种别对照表”得出其种别&#xff0c;用一数字表示。&#xff09;…

Java 连接数据库

数据库&#xff1a;存储数据&#xff08;集中管理&#xff09; 目的&#xff1a; 文件中的数据能够放在数据库中集中管理 管理方法&#xff1a;一个项目一个库&#xff0c;每个库中包含最小化数据的表 开发&#xff1a; 节省存储空间&#xff0c;节省运行空间&#xff0c;采…

ELK分布式日志管理平台部署

目录 一、ELK概述 1、ELK概念&#xff1a; 2、其他数据收集工具&#xff1a; 3、ELK工作流程图&#xff1a; 4、ELK 的工作原理&#xff1a; 5、日志系统的特征&#xff1a; 二、实验部署&#xff1a; 1、ELK Elasticsearch 集群部署 2、安装 Elasticsearch-head 插件 …

【HTTP协议】简述HTTP协议的概念和特点

&#x1f38a;专栏【网络编程】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出小吉的问题 文章目录 &#x1f33a;概念&#x1f33a;特点&#x1f384;请求协议&#x1f384;响应协议…

map()的用法

JavaScript Array map() 方法 先说说这个方法浏览器的支持&#xff1a; 支持五大主流的浏览器&#xff0c; 特别注意&#xff1a;IE 9 以下的浏览器不支持&#xff0c;只支持IE 9以上的版本的浏览器 特别注意&#xff1a;IE 9 以下的浏览器不支持&#xff0c;只支持IE 9以上的…

uniapp微信小程序地图实现绘制polygon(保姆级教程 全网最全!!!)

用户需求&#xff1a;需要在填写表单信息时&#xff0c;在地图上标绘自己房屋的位置信息。 这个问题处理了很久&#xff0c;在网上也没有找到全面的相关案例&#xff0c;所以我将我的思路分享给大家&#xff0c;希望可以解决大家遇到的问题。如果大家有更好的思路&#xff0c;…

分享几种 Java8 中通过 Stream 对列表进行去重的方法

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 1. Stream 的 distinct…

java商城系统选型技巧

近期有很多网友在知乎、百度上咨询如何选择java商城系统&#xff0c;本文我们介绍目前有哪些java商城系统&#xff0c;如何选择商城系统&#xff0c;希望有所帮助。 我们之前做过调研&#xff0c;目前java语言开发的商城系统主要有shop、javashop、ejavashop、远丰、mall4j、li…