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

``
相关推荐
瓜瓜怪兽亚6 分钟前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院11 分钟前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq77982334014 分钟前
React组件完全指南
前端·javascript·react.js
qq77982334041 分钟前
React Hooks完全指南
前端·javascript·react.js
Moment43 分钟前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead1 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
lecepin2 小时前
AI Coding 资讯 2025-10-22
前端·javascript·后端
BumBle3 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
搞个锤子哟3 小时前
vant4的van-pull-refresh里的列表不在顶部时下拉也会触发刷新的问题
前端