当前位置: 首页 > news >正文

vue3 v-html中使用v-viewer

安装:npm install v-viewer@next
在main.js中配置

import “viewerjs/dist/viewer.css”;
import Viewer from “v-viewer”;
app.use(Viewer, {
Options: {
inline: true, //默认值:false。启用内联模式。
button: true, //在查看器的右上角显示按钮。
navbar: false, //指定导航栏的可见性。
title: true, /指定标题的可见性和内容。
toolbar: true, //指定工具栏及其按钮的可见性和布局。
tooltip: true, //放大或缩小时显示带有图像比率(百分比)的工具提示。
movable: true, //启用以移动图像。
zoomable: true, //启用以缩放图像
rotatable: true, //启用以旋转图像
scalable: true, //启用以缩放图像。
transition: true, //为某些特殊元素启用CSS3转换。
fullscreen: true, //启用以在播放时请求全屏。
keyboard: true, //启用键盘支持。
url: ‘data-source’, //默认值:‘src’。定义获取原始图像URL以供查看的位置。
},
});
使用

 <viewer :images="photo"><img v-for="(src, index) in photo" :src="src" :key="index" /></viewer>data() {return {photo: ["https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675","https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675","https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675","https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675","https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",],};},
```

相关文章:

vue3 v-html中使用v-viewer

安装&#xff1a;npm install v-viewernext 在main.js中配置 import “viewerjs/dist/viewer.css”; import Viewer from “v-viewer”; app.use(Viewer, { Options: { inline: true, //默认值&#xff1a;false。启用内联模式。 button: true, //在查看器的右上角显示按钮。 …...

Leetcode算法解析——查找总价格为目标值的两个商品

1. 题目链接&#xff1a;LCR 179. 查找总价格为目标值的两个商品 2. 题目描述&#xff1a; 商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 示例 1&#xff1a; 输入&#xff1a;price …...

unity游戏开发引擎unity3D开发

Unity&#xff08;也被称为Unity3D&#xff09;是一款强大的跨平台游戏引擎&#xff0c;用于开发2D和3D游戏&#xff0c;以及其他交互式应用程序。以下是Unity游戏开发的一般步骤&#xff1a; 安装和设置Unity&#xff1a; 首先&#xff0c;您需要下载并安装Unity。确保选择适…...

iptables

目录 iptables 匹配规则&#xff1a;由上到下依次匹配&#xff0c;一旦匹配不再匹配 参数 知识点 REJECT与DROP REJECT与DROP的区别 当使用的时REJECT时&#xff0c;客户端访问迅速返回的值是拒绝连接 当使用的是DROP时&#xff0c;返回的时连接超时 REJECT与drop适用…...

竞赛 深度学习LSTM新冠数据预测

文章目录 0 前言1 课题简介2 预测算法2.1 Logistic回归模型2.2 基于动力学SEIR模型改进的SEITR模型2.3 LSTM神经网络模型 3 预测效果3.1 Logistic回归模型3.2 SEITR模型3.3 LSTM神经网络模型 4 结论5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 …...

Spark入门

目录 Spark入门: 概述历史概述SparkCore&#xff1a;RDDSparkSQL:SparkStreamingSpark内核调优 Spark概述 回顾&#xff1a; Hadoop HDFS存储 MR分析计算 YARN调度 Hadoop的MR计算中的shuffle需要落盘&#xff0c;速度不够快。 Spark是一种基于内存的分析计算引擎。 历史…...

react–antd 实现TreeSelect树形选择组件,实现点开一层调一次接口

效果图: 注意: 当选择“否”&#xff0c;开始调接口&#xff0c;不要把点击调接口写在TreeSelect组件上&#xff0c;这样会导致问题出现&#xff0c;没有层级了 部分代码:...

android 固定进度环形刷新效果

android 固定进度无限旋转的环形效果 效果图 效果视频&#xff1a; Record_2023-10-13-17-17-19[1] Activity 中使用 val rotation: ObjectAnimator ObjectAnimator.ofFloat(progressBar, "rotation", 0f, 360f) rotation.duration 000 // 旋转持续时间为2秒 rot…...

python jieba 词性标注 中文词性分类 nlp jieba.posseg

参考&#xff1a;https://blog.csdn.net/yellow_python/article/details/83991967 from jieba.posseg import dt dt.word_tag_tab[好看] >>> vflag_en2cn { ‘a’: ‘形容词’, ‘ad’: ‘副形词’, ‘ag’: ‘形语素’, ‘an’: ‘名形词’, ‘b’: ‘区别词’, ‘…...

LeetCode 每日一题 2023/10/9-2023/10/15

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 10/9 2578. 最小和分割10/10 2731. 移动机器人10/11 2512. 奖励最顶尖的 K 名学生10/12 2562. 找出数组的串联值10/13 1488. 避免洪水泛滥10/14 136. 只出现一次的数字10/1…...

相似性搜索:第 3 部分--混合倒排文件索引和产品量化

接续前文&#xff1a;相似性搜索&#xff1a;第 2 部分&#xff1a;产品量化 SImilarity 搜索是一个问题&#xff0c;给定一个查询的目标是在所有数据库文档中找到与其最相似的文档。 一、介绍 在数据科学中&#xff0c;相似性搜索经常出现在NLP领域&#xff0c;搜索引擎或推…...

小程序使用uni.createAnimation只执行一次的问题

思路&#xff1a; 在页面创建的时候&#xff0c;创建一个临时动画对象调用 step() 来表示一组动画完成通过动画实例的export方法导出动画数据传递给组件的animation属性还原动画页面卸载的时候&#xff0c;清除动画数据 <template><view class"content"&g…...

win10取消ie浏览器自动跳转edge浏览器

建议大家看完整篇文章再作操作 随着windows10 日渐更新&#xff0c;各种不同的操作&#xff0c;规避IE浏览器跳转Edge浏览器的问题 算了&#xff0c;找了台云机装的server 有自带的IE 1.&#xff08;失败&#xff09;思路 协助Edge浏览器 管理员身份打开 PowerShell 一般e…...

目录启示:使用 use 关键字为命名空间内的元素建立非限定名称

文章目录 参考环境三种名称非限定名称限定名称完全限定名称举个栗子 useuse 关键字use ... as .. 命名冲突真假美猴王两个世界 参考 项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯飞星火认知大模型、ChatGPTPHP 官方PHP ManualPHP 官方language.namespaces.ra…...

Go语言介绍与安装

介绍与安装 本教程介绍了 Go&#xff0c;并讨论了选择 Go 相对于其他编程语言的优势。我们还将学习如何在Windows 中安装 Go。 介绍 Go也称为Golang&#xff0c;是由 Google 开发的一种开源、编译型、静态类型的编程语言。 Go创造背后的关键人物是Rob Pike、 Ken Thompson和…...

常用傅里叶变换表

傅里叶展开 傅里叶变换 傅里叶逆变换 时域信号 弧频域信号 线性变换 时域平移 频域平移 伸缩变换 微分性质 逆变换的微分性质 卷积定理 原函数变换结果 单位阶跃函数&#xff1a; 符号函数&#xff1a; 矩形函数&#xff1a; 辛格函数&#xff1a;...

生活中的视音频技术

生活中的视音频技术 平时我们打开电脑中自己存电影的目录的话&#xff0c;一般都会如下图所示&#xff0c;一大堆五花八门的电影。&#xff08;其实专业的影视爱好者一概会把影视文件分门别类的&#xff0c;但我比较懒&#xff0c;一股脑把电影放在了一起&#xff09; 因为下载…...

一种用于肽图分析的烷化剂,Desthiobiotin-Iodoacetamide

中文名&#xff1a;脱硫生物素-碘乙酰胺 英文名&#xff1a;Desthiobiotin-Iodoacetamide 化学式&#xff1a;C14H25IN4O3 分子量&#xff1a;424.28 外观&#xff1a;固体/粉末 规格&#xff1a;10mg、25mg、50mg等&#xff08;接受各种规格的定制服务&#xff0c;具体可…...

【(数据结构) —— 顺序表的应用-通讯录的实现】

&#xff08;数据结构&#xff09;—— 顺序表的应用-通讯录的实现 一.通讯录的功能介绍1.基于动态顺序表实现通讯录(1). 功能要求(2).重要思考 二. 通讯录的代码实现1.通讯录的底层结构(顺序表)(1)思路展示(2)底层代码实现(顺序表&#xff09; 2.通讯录上层代码实现(通讯录结构…...

macbook磁盘清理免费教程分享

笔记本电脑在是我们工作和生活中重要组成部分&#xff0c;磁盘清理是常有的事&#xff0c;而macbook作为其中的代表之一&#xff0c;也越来越受到人们的青睐。然而&#xff0c;如何进行macbook磁盘清理&#xff0c;也事许多人都会遇到的问题&#xff0c;特别是被提示“磁盘已满…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

window 显示驱动开发-如何查询视频处理功能(三)

​D3DDDICAPS_GETPROCAMPRANGE请求类型 UMD 返回指向 DXVADDI_VALUERANGE 结构的指针&#xff0c;该结构包含特定视频流上特定 ProcAmp 控件属性允许的值范围。 Direct3D 运行时在D3DDDIARG_GETCAPS的 pInfo 成员指向的变量中为特定视频流的 ProcAmp 控件属性指定DXVADDI_QUER…...