使用v-viewer实现图片预览（vue2与vue3都支持）

官方文档

vue2：

GitHub - mirari/v-viewer: Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

vue3:

Vue3图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 - Mirari's Blog

安装

- vue2:

npm install [email protected]
# 或
yarn add [email protected]

注意：vue2项目添加时需要添加版本号，否则安装v-viewer最新版本vue2项目不一定支持

- vue3：(直接添加即可)

npm install v-viewer
# 或
yarn add v-viewer

在 main.js 文件中引入和配置 v-viewer 插件

- vue2:

// 引入图片预览
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999, // 设置图片预览组件的层级，确保能在其他组件之上
    },
})

直接Vue.use也可

Vue.use(Viewer)

- vue3:

import { createApp } from 'vue'
import App from './App.vue'
// 引入图片预览
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

const app = createApp(App)

app.use(Viewer, {
    defaultOptions: {
        zIndex: 9999, // 设置图片预览组件的层级，确保能在其他组件之上
    },
})


app.use(Viewer) // 也可

使用：(小编只放vue2的代码了，vue3需要注意以下语法即可)

- 方法一：点击直接调用预览 —— this.$viewerApi()

<button @click="doPriveImg()">预览图片</button>


doPriveImg(){
    const imgLists = [
        'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
        'https://img1.baidu.com/it/u=3689823469,321459310&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
        ……
    ] // 接受图片路径的数组
    this.$viewerApi({
          images: imgLists,
    })
}

- 方法二：利用img标签预览 —— v-viewer

<img
    v-for="(image, index) in imageList"
    :key="index"
    :src="image"
    v-viewer
/>

imageList: [
    'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    'https://img1.baidu.com/it/u=3689823469,321459310&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
],

使用v-viewer实现图片预览（vue2与vue3都支持）

猜你喜欢