当前位置: 首页 > 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",],};},
```
http://www.lryc.cn/news/193164.html

相关文章:

  • Leetcode算法解析——查找总价格为目标值的两个商品
  • unity游戏开发引擎unity3D开发
  • iptables
  • 竞赛 深度学习LSTM新冠数据预测
  • Spark入门
  • react–antd 实现TreeSelect树形选择组件,实现点开一层调一次接口
  • android 固定进度环形刷新效果
  • python jieba 词性标注 中文词性分类 nlp jieba.posseg
  • LeetCode 每日一题 2023/10/9-2023/10/15
  • 相似性搜索:第 3 部分--混合倒排文件索引和产品量化
  • 小程序使用uni.createAnimation只执行一次的问题
  • win10取消ie浏览器自动跳转edge浏览器
  • 目录启示:使用 use 关键字为命名空间内的元素建立非限定名称
  • Go语言介绍与安装
  • 常用傅里叶变换表
  • 生活中的视音频技术
  • 一种用于肽图分析的烷化剂,Desthiobiotin-Iodoacetamide
  • 【(数据结构) —— 顺序表的应用-通讯录的实现】
  • macbook磁盘清理免费教程分享
  • cartographer_ros数据加载与处理
  • 设计模式-7种结构型模式
  • 华为李鹏:加速5G商业正循环,拥抱更繁荣的5.5G(5G-A)
  • Marin说PCB之CoilcraftBourns POC 电感的性能对比
  • 聊聊Maven的依赖传递、依赖管理、依赖作用域
  • centos6/7 SOCKS5 堆溢出漏洞修复(RPM方式)curl 8.4 CVE-2023-38545 CVE-2023-38546
  • C#,数值计算——数据建模Proposal的计算方法与源程序
  • 如何使用命令生成动态链接库.dll文件(保姆级教学)
  • Qt之模块介绍
  • Socks5代理和代理IP
  • 计算机指令、机器码