预览功能实现

news2024/11/24 5:47:11

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

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

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

相关文章

红黑树(万字图文详解)

红黑树 1. 红黑树的概念2. 红黑树的性质3. 红黑树节点的定义4. 红黑树结构5. 红黑树的插入操作5.1 按照二叉搜索的树规则插入新节点5.2 检测新节点插入后&#xff0c;红黑树的性质是否造到破坏5.2.1 情况一: cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红…

【日常总结】Swagger 3.0 + 集成 knife4j ,并设置header入参

一、场景 环境&#xff1a; 二、问题 思路 &#xff1a; 三、解决方案 &#xff08;推荐&#xff09; Stage 1&#xff1a;接入knife4j 依赖 Stage 2&#xff1a;修改 yaml 配置 Stage 3&#xff1a;修改 swagger 3 配置文件 Stage 4&#xff1a;查看效果 Swagger UI …

Junos webauth_operation.php 文件上传漏洞复现(CVE-2023-36844)

0x01 产品简介 Junos 是 Juniper Networks 生产的一款可靠的高性能网络操作系统。 0x02 漏洞概述 Junos webauth_operation.php接口处存在文件上传漏洞&#xff0c;未经身份认证的攻击者可利用 Junos 操作系统的 J-Web 服务 /webauth_operation.php 路由上传 php webshell&…

LVS-DR实验

实验前准备 DR服务器&#xff1a;192.168.188.11 192.168.188.15 NFS服务器&#xff1a;192.168.188.14 Web服务器1&#xff1a;192.168.188.12 Web服务器2&#xff1a;192.168.188.13 Vip&#xff1a;192.168.188.188 客户端&#xff1a;192.168.188.200 配置负载均衡调度…

05-学成在线课程分类查询

课程分类查询 界面原型 在新增课程基本信息界面中课程等级、课程类型、课程分类三处信息需要用户选择 当我们点击新增课程时,前端会请求内容管理服务中的content/course-category/tree-nodes接口获取课程分类表中的课程分类信息 响应数据模型 课程分类表course_category是一…

文件权限中 chmod、u+x、u、r、w、x分别代表什么

Linux系统中的每个文件和目录都有访问许可权限&#xff0c;如下面所示&#xff1a; 要说清楚问题&#xff0c;我们截取一些内容&#xff1a; ypyubuntu:~$ ls -l drwxr-xr-- 2 ypy ypy 4096 Nov 30 18:33 Desktop/ drwxr-xr-- 2 ypy ypy 4096 Nov 30 18:33 Documen…

Unity之NetCode多人网络游戏联机对战教程(10)--玩家动画同步

文章目录 前言NetworkAnimation服务端权威客户端权威 前言 这次的动画同步与位置同步&#xff0c;可以说实现思路是一样的&#xff0c;代码相似度也非常高 NetworkAnimation 如果直接挂载这个脚本只有Host&#xff08;服务端&#xff09;才可以同步&#xff0c;Client是没有…

迁移redis数据库中的数据到另一台服务器

方案一 下面我使用的redis是用docker安装的&#xff0c;不是通过下载安装包安装的&#xff0c;所以和我安装方式不一样的小伙伴可以不看&#xff0c;因为很多操作是基于docker的 话不多说&#xff0c;直接开搞&#xff01; 1.首先一定要确保两台服务器上面的redis版本要一致…

图解Redis适用场景

Redis以其速度而闻名。 1 业务数据缓存 1.1 通用数据缓存 string&#xff0c;int&#xff0c;list&#xff0c;map。Redis 最常见的用例是缓存对象以加速 Web 应用程序。 此用例中&#xff0c;Redis 将频繁请求的数据存储在内存。允许 Web 服务器快速返回频繁访问的数据。这…

vue day2

1、指令修饰符&#xff1a;.指明一些指令后缀&#xff0c;不同后缀封装不同处理操作 按键修饰符&#xff1a;keyup.enter v-model修饰符&#xff1a; v-model.trim&#xff1a;去首位空格 v-model.number&#xff1a;转数字 事件修饰符&#xff1a; 阻止事件冒泡&#xff1…

机器人制作开源方案 | 网球自动拾取机

作者&#xff1a;柳文浩、李浩杰、苏伟男、贾思萌、张天芸 单位&#xff1a;西安外事学院 指导老师&#xff1a;胡宝权、陈小虎 1. 产品说明 1.1 设计目的 近年来&#xff0c;网球运动越来越受到老百姓的欢迎&#xff0c;各种规模的比赛层出不穷。然而由于网球运动极为激烈…

滴滴昨晚崩了,看这波还敢不敢降本增效?

起因 截至 2023 年 11 月 27 日晚&#xff0c;中国最大的网约车服务平台滴滴打车遭遇系统崩溃&#xff0c;继阿里云控制台故障之后&#xff0c;再次引发热议。这一事件迅速攀升至热搜榜首&#xff0c;引起广泛关注。 今晚约 10 点&#xff0c;滴滴打车遭遇大范围技术故障。用户…

Spring的三种常见Bean的初始化参数机制,你都用对了吗?

大家好&#xff0c;我是G探险者。 spring这本九阳神功秘籍&#xff0c;我们一点一滴去研读。 在Spring框架中&#xff0c;Bean的实例化与初始化是一个复杂的过程&#xff0c;一个Bean的实例化过程往往伴随着一些属性的初始化动作&#xff0c;有的是在Bean实例化之后才进行的属…

解决VMware VCenter存储上传镜像文件失败

VMware VCSA6.7上传共享文件时提示操作失败&#xff0c;由于不确定的原因&#xff0c;操作失败。通常&#xff0c;当浏览器不信任证书时会发生此问题。如果您使用的是自签名证书或自定义证书&#xff0c;请在新的浏览器选项卡中打开下面的 URL并接受证书&#xff0c;然后重试操…

五、Lua流程控制与函数

一、流程控制 &#xff08;一&#xff09;含义 Lua 编程语言流程控制语句通过程序设定一个或多个条件语句来设定。在条件为 true 时执行指定程序代码&#xff0c;在条件为 false 时执行其他指定代码。 &#xff08;二&#xff09;原型 if (成立) then执行体1else执行体2 end…

蓝桥杯每日一题2023.11.27

题目描述 星系炸弹 - 蓝桥云课 (lanqiao.cn) 题目分析 对于此题目一一枚举即可 #include<bits/stdc.h> using namespace std; bool is_r(int n) {if((n % 4 0 && n % 100 ! 0)|| n % 400 0)return true;return false; } int mm[13] {0, 31, 28, 31, 30, 3…

智能优化算法应用:基于樽海鞘群算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于樽海鞘群算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于樽海鞘群算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.樽海鞘群算法4.实验参数设定5.算法结果6.参考…

图像分类任务

本文记录 北京邮电大学 计算机学院的学习记录 什么是图像分类任务&#xff1f; 图像分类任务是计算机视觉中的核心任务&#xff0c;其目 标是根据图像信息中所反映的不同特征&#xff0c;把不同类别 的图像区分开来 图像分类任务有哪些难点呢&#xff1f; 语义鸿沟视角变化…

【springboot】宝塔简单部署springboot 配置https

宝塔简单部署springboot配置https 需求步骤1. springboot通过maven组件打成jar包2. 将jar包部署到宝塔上3. 下载安装nginx并创建网站节点4. 设置域名或者IP5. 设置反向代理:代理后端服务的ip和端口7. 配置SSL/TLS 需求 宝塔部署springboot项目,用nginx反向代理后端IP端口&…

用Elasticsearch搜索匹配功能实现基于地理位置的查询

1.Redis,MongoDB,Elasticsearch实现地理位置查询比较 1.1 Redis: 优点&#xff1a;Redis提供了地理空间索引功能&#xff0c;可以通过Geo数据类型进行地理位置查询。这使得Redis在处理地理位置查询时非常高效。 缺点&#xff1a; Redis的地理空间索引功能相对简单&#xff0…