预览功能实现

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

        <!-- 预览 --><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.mzph.cn/news/176076.shtml

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

相关文章

微服务--03--OpenFeign 实现远程调用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 OpenFeign其作用就是基于SpringMVC的常见注解&#xff0c;帮我们优雅的实现http请求的发送。 RestTemplate实现了服务的远程调用 OpenFeign快速入门1.引入依赖2.启用…

OpenCV快速入门【完结】:总目录——初窥计算机视觉

文章目录 前言目录1. OpenCV快速入门&#xff1a;初探2. OpenCV快速入门&#xff1a;像素操作和图像变换3. OpenCV快速入门&#xff1a;绘制图形、图像金字塔和感兴趣区域4. OpenCV快速入门&#xff1a;图像滤波与边缘检测5. OpenCV快速入门&#xff1a;图像形态学操作6. OpenC…

创建可以离线打包开发的uniapp H5项目

安装node环境 略 安装vue脚手架&#xff0c;在线 npm install -g vue/cli PS&#xff1a;vue-cli已进入维护模式&#xff0c;vue3最新脚手架使用npm init vuelatest安装&#xff0c;安装后使用create-vue替换vue指令&#xff0c;create-vue底层使用vite提升前端开发效率&…

Redis应用的16个场景

常见的16种应用场景: 缓存、数据共享分布式、分布式锁、全局 ID、计数器、限流、位统计、购物车、用户消息时间线 timeline、消息队列、抽奖、点赞、签到、打卡、商品标签、商品筛选、用户关注、推荐模型、排行榜. 1、缓存 String类型 例如&#xff1a;热点数据缓存&#x…

Redis 命令处理过程

我们知道 Redis 是一个基于内存的高性能键值数据库, 它支持多种数据结构, 提供了丰富的命令, 可以用来实现缓存、消息队列、分布式锁等功能。 而在享受 Redis 带来的种种好处时, 是否曾好奇过 Redis 是如何处理我们发往它的命令的呢&#xff1f; 本文将以伪代码的形式简单分析…

centos 显卡驱动安装(chatglm2大模型安装步骤一)

1.服务器配置 服务器系统:Centos7.9 x64 显卡:RTX3090 (24G) 2.安装环境 2.1 检查显卡驱动是否安装 输入命令:nvidia-smi(显示显卡信息) 如果有以下显示说明,已经有显卡驱动。否则需要重装。 2.2 下载显卡驱动 第一步:浏览器输入https://www.nvidia.cn/Downloa…

Python读取Ansible playbooks返回信息

一&#xff0e;背景及概要设计 当公司管理维护的服务器到达一定规模后&#xff0c;就必然借助远程自动化运维工具&#xff0c;而ansible是其中备选之一。Ansible基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、chef、func、fabric&#xff09;的优点&#x…

nuxt、vue实现PDF和视频文件的上传、下载、预览

上传 上传页面 <el-form-item :label"(form.ququ3 1 ? 参培 : form.ququ3 2 ? 授课 : ) 证明材料" prop"ququ6"><PdfUpload v-model"form.ququ6" :fileType"[pdf, mp4, avi, ts]"></PdfUpload> </el-form-i…

亚马逊,shein,temu如何避免爆品评分低被强制下架

近期&#xff0c;一些Temu卖家反映产品下架问题&#xff0c;无论是日出千单的爆品还是其他商品&#xff0c;都有可能面临下架的风险。这其中最主要的原因之一是产品质量问题&#xff0c;导致消费者差评较多&#xff0c;评分降至4.2分或4.0分以下时&#xff0c;平台可能会强制下…

EfficientViT:具有级联群体注意力的内存高效Transformer

EfficientViT: Memory Efficient Vision Transformer with Cascaded Group Attention 1、介绍2、使用 Vision Transformer 加快速度2.1 内存效率2.2 计算效率2.3 参数效率 3、Efficient Vision Transformer3.1 EfficientViT 构建模块3.3 EfficientViT 网络架构 4、实验5、结论 …

YOLOv8独家原创改进: AKConv(可改变核卷积),即插即用的卷积,效果秒杀DSConv | 2023年11月最新发表

💡💡💡本文全网首发独家改进:可改变核卷积(AKConv),赋予卷积核任意数量的参数和任意采样形状,为网络开销和性能之间的权衡提供更丰富的选择,解决具有固定样本形状和正方形的卷积核不能很好地适应不断变化的目标的问题点,效果秒殺DSConv 1)AKConv替代标准卷积进行…

如何在vs2019及以后版本(如vs2022)上添加 添加ActiveX控件中的MFC类

有时候我们在MFC项目开发过程中&#xff0c;需要用到一些微软已经提供的功能&#xff0c;如VC使用EXCEL功能&#xff0c;这时候我们就能直接通过VS2019到如EXCEL.EXE方式&#xff0c;生成对应的OLE头文件&#xff0c;然后直接使用功能&#xff0c;那么&#xff0c;我们上篇文章…

【Docker】python flask 项目如何打包成 Docker images镜像 上传至阿里云ACR私有(共有)镜像仓库 集成Drone CI

一、Python环境编译 1、处理好venv环境 要生成正常的 requirements.txt 文件&#xff0c;我们就需要先将虚拟环境处理好 创建虚拟环境&#xff08;可选&#xff09;&#xff1a; 在项目目录中&#xff0c;你可以选择使用虚拟环境&#xff0c;这样你的项目依赖将被隔离在一个…

C++基础 -6-二维数组,数组指针

二维数组在内存中的存放方式和一维数组完全相同 下表把二维数组抽象成了行列形式方便理解 a[0]指向第一行首元素地址 a指向第一行的首地址 所以a地址和a[0]地址相同,因为起点相同 但a[0]1往右偏移 但a1往下方向偏移 方便理解 an控制行 a[0]n控制列(相当于*an) 数组指针指向二…

食材管家,轻松搞定!商户选择生鲜配送系统的原因

随着消费者对生鲜食品的需求不断增加&#xff0c;生鲜市场逐渐成为了电商领域中的热门行业。而生鲜配送系统&#xff0c;则是生鲜电商发展中不可或缺的一部分。本文将探讨商户选择生鲜配送系统的几个原因。 1. 提高效率 生鲜配送系统通过智能化的订单处理、路线规划和配送优化…

【MySQL系列】PolarDB入门使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

不用render_template函数,把html代码放在py文件里,不用单独写html文件

3.猜拳游戏&#xff1a;石头、剪刀、布的游戏 ##不用render_template函数&#xff0c;把html代码放在py文件里&#xff0c;不用单独写html文件 from flask import Flask, request import randomapp Flask(__name__)app.route(/) def index():#下面form标签虽然放在注释里&…

Scanner常用知识点

在Java中&#xff0c;Scanner类是用于读取用户输入的工具类&#xff0c;可以从多种输入源读取数据&#xff0c;如标准输入流、文件或字符串。以下是一些Scanner类的常用知识点&#xff1a; Scanner的初始化&#xff1a;在使用Scanner类之前&#xff0c;需要先将其导入到你的Ja…

Pycharm在debug问题解决方案

Pycharm在debug问题解决方案 前言一、Frames are not available二、查看变量时一直显示collecting data并显示不了任何内容 前言 Pycharm在debug时总是出现一些恼人的问题&#xff0c;以下是博主在训练中遇到的问题及在网上找到的可用解决方案&#xff1a; 一、Frames are not…

C语言基础篇5:指针(二)

接上篇&#xff1a;C语言基础篇5&#xff1a;指针(一) 4 指针作为函数参数 4.1 指针变量作为函数的参数 指针型变量可以作为函数的参数&#xff0c;使用指针作为函数的参数是将函数的参数声明为一个指针&#xff0c;前面提到当数组作为函数的实参时&#xff0c;值传递数组的地址…