v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条

news2024/11/14 13:40:06

效果

在这里插入图片描述

在这里插入图片描述

导入组件

import ElImageViewer from "element-ui/packages/image/src/image-viewer";
components:{ ElImageViewer },

模板使用组件

<el-image-viewer
      v-if="isShowPics"
      :on-close="closeViewer"
      :url-list="srcList"
    />

定义两个变量

isShowPics:false,
   srcList:[],
在v-html添加点击获取图片
<div v-html="newsForm.content" @click="getImg($event)" style="padding-left: 50px;padding-right: 50px;"></div>

两个点击事件,包含预览时滚动异常

closeViewer(){
      this.isShowPics = false
      this.srcList = []
      move()
      //取消滑动限制
      function move(){
        var mo=function(e){
          e.preventDefault();
      };
      document.body.style.overflow='';//出现滚动条
      document.removeEventListener("touchmove",mo,false);
    }
    },
    getImg($event){
      let currentSrc=$event.target.currentSrc
      if (currentSrc){
        this.srcList = [currentSrc]
        this.isShowPics = true
        stop()
      }
        //禁止滚动
      function stop(){
        var mo=function(e){
          e.preventDefault();
        };
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
      }
    },

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

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

相关文章

Redis - 哨兵(Sentinel)

Redis 的主从复制模式下&#xff0c;⼀旦主节点由于故障不能提供服务&#xff0c;需要⼈⼯进⾏主从切换&#xff0c;同时⼤量 的客⼾端需要被通知切换到新的主节点上&#xff0c;对于上了⼀定规模的应⽤来说&#xff0c;这种⽅案是⽆法接受的&#xff0c; 于是Redis从2.8开始提…

使用wordpress搭建简易的信息查询系统

背景 当前有这样的一个需求&#xff0c;要实现让客户能够自助登录系统查询一些个人的信息&#xff0c;市面上没有特别符合我的需求的产品&#xff0c;经过一段时间的研究&#xff0c;想出了一个用wordpress实现简易信息查询系统&#xff0c;有两种方式。 方式一&#xff1a;使…

探索 Python HTTP 的瑞士军刀:Requests 库

文章目录 探索 Python HTTP 的瑞士军刀&#xff1a;Requests 库第一部分&#xff1a;背景介绍第二部分&#xff1a;Requests 库是什么&#xff1f;第三部分&#xff1a;如何安装 Requests 库&#xff1f;第四部分&#xff1a;Requests 库的基本函数使用方法第五部分&#xff1a…

【青牛科技】 GC6153——TMI8152 的不二之选,可应用于摇头机等产品中

在电子工程领域&#xff0c;不断寻求性能更优、成本更低的解决方案是工程师们的永恒追求。今天&#xff0c;我们要为广大电子工程师带来一款极具竞争力的产品 —— GC6153&#xff0c;它将成为 TMI8152 的完美替代之选。 一、产品背景 随着科技的飞速发展&#xff0c;电子设备…

基于yolov8、yolov5的番茄成熟度检测识别系统(含UI界面、训练好的模型、Python代码、数据集)

摘要&#xff1a;番茄成熟度检测在农业生产及质量控制中起着至关重要的作用&#xff0c;不仅能帮助农民及时采摘成熟的番茄&#xff0c;还为自动化农业监测提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的番茄成熟度检测模型&#xff0c;该模型使用了…

艾体宝干货丨微突发流量检测与分析:IOTA让网络监控更精准

网络流量中的微突发问题常常难以察觉&#xff0c;但它们可能对网络性能产生显著影响。这篇文章深入探讨了如何利用IOTA来捕捉和分析微突发&#xff0c;帮助您快速有效地解决网络中的突发流量问题。 什么是微突发&#xff08;Microburst&#xff09;流量&#xff1f; 微突发是…

论文略读: ALPAGASUS: TRAINING A BETTER ALPACA WITH FEWER DATA

ICLR 2024 1 背景 大模型通常需要在有监督指令数据集上进行指令微调来加强指令遵循能力 但是广泛使用的数据集包含许多具有不正确或不相关响应的低质量样本&#xff0c;这对大模型微调具有误导性——>论文提出了一种简单有效的数据选择策略&#xff0c;使用ChatGPT自动识别…

【Android】ANR监控治理技术方案

一、 背景 1、 bugly针对crash监控做的比较好&#xff0c;但是对anr监控&#xff0c;早期版本监听 /data/anr 目录的变化可以拿到数据&#xff0c;但是现在高版本已经没有权限监听此目录&#xff0c;当前数据非常少&#xff0c;结合历次数据来看对我们解决ANR问题没有任何帮助…

FreeRTOS学习11——时间片任务调度

时间片任务调度 时间片任务调度 时间片任务调度 概念&#xff1a;时间片调度主要针对优先级相同的任务&#xff0c;当多个任务的优先级相同时&#xff0c;任务调度器会在每一次系统时钟节拍到的时候切换任务&#xff0c;也就是说 CPU 轮流运行优先级相同的任务&#xff0c;每个…

怎么把模糊照片变清晰?4种方法助你修复图片清晰度!

在我们的日常生活中&#xff0c;模糊的图片常常成为影响视觉体验的一大障碍&#xff0c;无论是由于时间久远导致老照片分辨率降低&#xff0c;还是拍摄时因手抖造成的画面模糊&#xff0c;都会让我们的图片质量大打折扣。为了帮助你解决这一困扰&#xff0c;我们为你整理了四种…

Pytorch学习--神经网络--完整的模型验证套路

一、选取的图片 全部代码依托于该博客 二、代码&#xff08;调用训练好的模型&#xff09; import torch import torchvision from PIL import Image from model import *img_path "dog.png" image Image.open(img_path)print(image.size)transform torchvisi…

力扣 LeetCode 454. 四数相加II(Day3:哈希表)

解题思路&#xff1a; 使用map 四个数组两两一组 前两个数组的各个值遍历相加&#xff0c;和为key&#xff0c;出现的次数为value 后两个数组的各个值遍历相加&#xff0c;如果该值的负数能在map中找到&#xff08;表示能抵消为0&#xff0c;符合题意四数之和为0&#xff0…

期权懂|交易股票期权该怎么操作?又该如何开户?

期权小懂每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 交易股票期权该怎么操作&#xff1f;又该如何开户&#xff1f; 一、交易股票期权主要包括以下几个步骤&#xff1a; &#xff08;1&#xff09;选择交易平台‌&#xff1a; 选择…

Unity类银河战士恶魔城学习总结(P124 CharacterStats UI玩家的UI)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了玩家属性栏&#xff0c;仓库&#xff0c;物品栏UI的制作 UI_StatSlot.cs 这个脚本是用来在Unity的UI上显示玩家属性&#xf…

【SSL-RL】自监督强化学习:自预测表征 (SPR)算法

&#x1f4e2;本篇文章是博主强化学习&#xff08;RL&#xff09;领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅…

Docker部署kafka集群

1&#xff0c;编写Docker Compose文件 编写一个docker-compose.yml文件来定义服务&#xff0c;以下定义了一个Zookeeper服务和三个Kafka Broker服务&#xff1a; 注意&#xff1a;把10.0.8.4替换成宿主IP version: 3.8services:zookeeper:image: bitnami/zookeeper:latestconta…

Qt滑动条美化自定义

效果展示 主要代码 头文件 下面是hi控件的头文件&#xff0c;我们继承一个Qt原生的滑动条类QSlider&#xff0c;然后在基类的基础上进行自定义&#xff0c;我会对重要的变量进行解析&#xff1a; class XSlider : public QSlider {Q_OBJECT public:explicit XSlider(QWidget…

wordpress实用功能A5资源网同款 隐藏下载框 支付框 需要登录才能查看隐藏的内容

实用功能 隐藏下载框 支付框 需要登录才能查看隐藏的内容, 个人网站防天朝申查实测有效 。 登录前&#xff0c;未登录&#xff1a; 登录后&#xff0c;已登录&#xff1a; 功能说明 该代码段的主要功能是隐藏支付框并为未 登录用户显示一条提示信息&#xff0c;告知他们需要…

Vue 简单入手

前端工程化&#xff08;Front-end Engineering&#xff09;指的是在前端开发中&#xff0c;通过一系列工具、流程和规范的整合&#xff0c;以提高开发效率、代码质量和可维护性的一种技术和实践方法。其核心目的是使得前端开发变得更高效、可扩展和可维护。 文章目录 一、Vue 项…

Spingboot 定时任务与拦截器(详细解释)

在 boot 环境中&#xff0c;一般来说&#xff0c;要实现定时任务&#xff0c;我们有两中方案&#xff0c;一种是使用 Spring 自带的定时 任务处理器 Scheduled 注解&#xff0c;另一种就是使用第三方框架 Quartz &#xff0c; Spring Boot 源自 SpringSpringMVC &#…