vue3 v-html中使用v-viewer

news/2025/2/21 2:55:15/

安装: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",],};},
```

http://www.ppmy.cn/news/1154436.html

相关文章

uniapp 自定义tabbar页面不刷新

最近在做自定义tabbar时&#xff0c;每次切换页面都要刷新&#xff0c;页面渲染很慢&#xff0c;需要实现切换页面不刷新问题。 结局思路&#xff0c;原生的tabbar切换页面时就不选新&#xff0c;用switchTab来跳转 1.pages.json中配置tabbar&#xff0c;如下,设置高度为0&am…

三、静态路由实验

拓扑图&#xff1a; 两个路由器分了三个网段出来&#xff0c;首先对两台PC机进行配置 进入R1路由器对两边链路进行ip配置 对AR2进行相同的配置&#xff0c;然后我们查看R1的路由表&#xff0c;里面有一些直连的信息。 三个网段的设备现在可以互通&#xff0c;我们要实现跨网段…

js深拷贝与浅拷贝

1.浅拷贝概念 浅拷贝是其属性与拷贝源对象的属性共享相同引用&#xff0c;当你更改源或副本时&#xff0c;也可能&#xff08;可能说的是只针对引用数据类型&#xff09;导致其他对象也发生更改。 特性&#xff1a; 会新创建一个对象&#xff0c;即objobj2返回fasle&#xf…

python每日一练(7)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

虹科 | 解决方案 | 新能源车EV测试解决方案

虹科Pico与世界主流的汽车厂商保持紧密合作&#xff0c;为新能源车EV测试提供完善的解决方案。 虹科Pico新能源车EV测试解决方案 高压系统安全检测——0V残留电压测试和绝缘电阻测试 三相电机绕组微电阻平衡和高压线路连接点微电阻检测 充电通讯与高压上/下电测试 旋变/位置…

第4章 选择结构程序设计

if语句&#xff08;if单分支、if-else双分支、else-if嵌套&#xff09;&#xff1b;switch语句;选择结构的嵌套;选择结构程序设计方法。 1.基本要求 (1)理解三种if语句的语法结构,掌握使用if语句设计选择结构程序的方法。 (2)理解switch语句的语法结构,掌握使用switch语句设计…

TiDB 7.4 发版:正式兼容 MySQL 8.0

MySQL 是全球最受欢迎的开源数据库&#xff0c;长期位于 DB-Engines Ranking 排行榜第二名&#xff0c;在世界范围内拥有数量庞大的企业用户和开发者。然而&#xff0c;随着时间的推移&#xff0c;MySQL 用户正面临新挑战。Oracle 官宣将在 2023 年 10 月终止 MySQL 5.7 版本的…

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

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