Vue 图片预览功能(含缩略图)

众所周知,常见的组件库如Element、Ant Design,自带的图片预览功能都没有缩略图,所以

需要单独封装一个图片预览的服务。

 第三方库:v-viewer

安装: 

npm install v-viewer viewerjs

若使用报错,可安装指定版本。

具体实现:

main.js

import Viewer from 'v-viewer'//引入图片预览
import 'viewerjs/dist/viewer.css'//引入图片预览//图片预览viewer
Vue.use(Viewer,{defaultOptions: {zIndex: 9999  // 需大于 dialog 默认值(通常 2000)}
})

用法:

export default {methods:{// 预览图片viewFn() {const images = ["https://picsum.photos/200/200","https://picsum.photos/300/200","https://picsum.photos/250/200"]let preIndex = 0;this.$viewerApi({images: images ,options: {initialViewIndex: preIndex,},});}, }}

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

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

相关文章

手写tomcat:基本功能实现(4)

逻辑架构 HTTP 请求与 Socket: 左侧的 “HTTP 请求” 箭头指向 “socket”,表示客户端发送的 HTTP 请求通过 socket 传输到服务器。Socket 负责接收请求,并提取出其中的 请求路径(如 /first)和 请求方法(如…

jvm安全点(一)openjdk17 c++源码垃圾回收安全点信号函数处理线程阻塞

1. 信号处理入口​​ ​​JVM_HANDLE_XXX_SIGNAL​​ 是 JVM 处理信号的统一入口,负责处理 SIGSEGV、SIGBUS 等信号。​​javaSignalHandler​​ 是实际注册到操作系统的信号处理函数,直接调用 JVM_HANDLE_XXX_SIGNAL。 ​​2. 安全点轮询页的识别​​ …

微信小程序:封装表格组件并引用

一、效果 封装表格组件,在父页面中展示表格组件并显示数据 二、表格组件 1、创建页面 创建一个components文件夹,专门用于存储组件的文件夹 创建Table表格组件 2、视图层 (1)表头数据 这里会从父组件中传递表头数据,这里为columns,后续会讲解数据由来 循环表头数组,…

【FMC216】基于 VITA57.1 的 2 路 TLK2711 发送、2 路 TLK2711 接收 FMC 子卡模块

产品概述 FMC216 是一款基于 VITA57.1 标准规范的 2 路 TLK2711 接收、2 路 TLK2711 发送 FMC 子卡模块。该板卡支持 2 路 TLK2711 数据的收发,支持线速率 1.6Gbps,经过 TLK2711 高速串行收发器,可以将 1.6Gbps 的高速串行数据解串为 16 位并…

K8S Gateway API 快速开始、胎教级教程

假设有如下三个节点的 K8S 集群: ​​ k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点 容器运行时是 containerd 一、Gateway 是什么 背景和目的 入口(Ingress)目前已停止更新。新的功能正在集成至网关 API 中。在 Kubernetes …

时序数据库IoTDB分布式架构解析与运维指南

一、IoTDB分布式架构概述 分布式系统由一组独立的计算机组成,通过网络通信,对外表现为一个统一的整体。IoTDB的原生分布式架构将服务分为两个核心部分: ‌ConfigNode(CN)‌:管理节点,负责管理…

Ubuntu 20.04 LTS 中部署 网页 + Node.js 应用 + Nginx 跨域配置 的详细步骤

Ubuntu 20.04 LTS 中部署 网页 Node.js 应用 Nginx 跨域配置 的详细步骤 一、准备工作1、连接服务器2、更新系统 二、安装 Node.js 环境1、安装 Node.js 官方 PPA(用于获取最新稳定版):2、安装 Node.js 和 npm(LTS 长期支持版本…

3DVR制作的工具或平台

3DVR(三维虚拟现实)是利用三维图像技术和虚拟现实技术,将真实场景进行三维扫描并转换成计算机可识别的三维模型,使用户能够在虚拟空间中自由漫游,体验身临其境的感觉。3DVR技术结合了全景拍摄和虚拟现实,提…

垂直智能体:企业AI落地的正确打开方式

在当前AI浪潮中,许多企业急于跟进,推出自己的AI智能体解决方案。然而,市场上大量出现的"万能型"智能体却鲜有真正解决实际问题的产品。本文将探讨为何企业应该专注于开发垂直领域智能体,而非追求表面上的全能&#xff0…

软件工程各种图总结

目录 1.数据流图 2.N-S盒图 3.程序流程图 4.UML图 UML用例图 UML状态图 UML时序图 5.E-R图 首先要先了解整个软件生命周期: 通常包含以下五个阶段:需求分析-》设计-》编码 -》测试-》运行和维护。 软件工程中应用到的图全部有:系统…

王者荣耀游戏测试场景题

如何测试一个新英雄:方法论与实践维度 测试一个新英雄不仅仅是“打打打”,而是一套完整的测试流程,包括设计文档验证、功能验证、数值验证、性能验证、交互验证等。可以从以下多个角度展开: 🔍 1. 方法论维度 ✅ 测试…

第四天的尝试

目录 一、每日一言 二、练习题 三、效果展示 四、下次题目 五、总结 一、每日一言 很抱歉的说一下,我昨天看白色巨塔电视剧,看的入迷了,同时也看出一些道理,学到东西; 但是把昨天的写事情给忘记了,今天…

多模态大语言模型arxiv论文略读(七十八)

AID: Adapting Image2Video Diffusion Models for Instruction-guided Video Prediction ➡️ 论文标题:AID: Adapting Image2Video Diffusion Models for Instruction-guided Video Prediction ➡️ 论文作者:Zhen Xing, Qi Dai, Zejia Weng, Zuxuan W…

优化 Spring Boot 应用启动性能的实践指南

1. 引言 Spring Boot 以其“开箱即用”的特性深受开发者喜爱,但随着项目复杂度的增加,应用的启动时间也可能会变得较长。对于云原生、Serverless 等场景而言,快速启动是一个非常关键的指标。 2. 分析启动过程 2.1 启动阶段概述 Spring Boot 的启动流程主要包括以下几个阶…

Ubuntu下配置VScode出现#include错误请更新includePath的解决方法

首先Ubuntu新手小白一定要先安装g,安装方法是: 在桌面右键打开终端,输入:sudo apt-get install g 安装好g之后,在vscode终端输入:g -v -E -x c - 输出这些路径,复制 如果还存在显示cout不存在的…

【背包dp】小结

背包问题总结 一、什么是背包问题? 定义:给定一个容量为 W 的背包和 n 件物品,每件物品有一个重量 w[i] 和价值 v[i],要求选择若干物品放入背包,在不超过容量的前提下,使总价值最大。 背包问题本质是&am…

济南国网数字化培训班学习笔记-第三组-1-电力通信传输网认知

电力通信传输网认知 电力通信基本情况 传输介质 传输介质类型(导引与非导引) 导引传输介质,如电缆、光纤; 非导引传输介质,如无线电波; 传输介质的选择影响信号传输质量 信号传输模式(单工…

代码随想录算法训练营第六十四天| 图论9—卡码网47. 参加科学大会,94. 城市间货物运输 I

每日被新算法方式轰炸的一天,今天是dijkstra(堆优化版)以及Bellman_ford ,尝试理解中,属于是只能照着代码大概说一下在干嘛。 47. 参加科学大会 https://kamacoder.com/problempage.php?pid1047 dijkstra&#xff08…

upload-labs通关笔记-第8关 文件上传之点绕过

目录 一、点绕过原理 二、deldot()函数 三、源码分析 四、渗透实战 1、构建脚本test8.php 2、打开靶场 3、bp开启拦截 4、点击上传 5、bp拦截 6、后缀名增加点 7、发包并获取脚本地址 8、访问脚本 本文通过《upload-labs靶场通关笔记系列》来进行upload-labs靶场的渗…

Spring Web MVC————入门(3)

今天我们来一个大练习,我们要实现一个登录界面,登录进去了先获取到登录人信息,可以选择计算器和留言板两个功能,另外我们是学后端的,对于前端我们会些基础的就行了,知道ajax怎么用,知道怎么关联…