在vue项目中引入v-viewer

vue3中引入

https://github.com/mirari/v-viewer/tree/v3

1、通过npm安装插件

npm install v-viewer@next

2、在vue项目中将v-viewer注册成全局

注意需引入viewerjs/dist/viewer.css样式文件

import { createApp } from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
const app = createApp(App)
app.use(VueViewer)
app.mount('#app')

3、在项目中使用

方式一，通过v-viewer指令的形式

<template>
  // 单图片使用
  <img :src="'/image/1.png'" v-viewer>
  // 多图片使用
  <div v-viewer>
    <img v-for="src in images" :key="src" :src="src">
  </div>
</template>

方式二，在图片外套一层viewer标签

<template>
  <viewer>
    <img v-for="src in images" :key="src" :src="src">
  </viewer>
</template>

方式三，通过api的形式放大图片

<template>
  <button type="button" @click="show">Click to show</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const images = [
      '/image/1.png',
      '/image/2.png',
      '/image/3.png',
      '/image/4.jpg',
    ];
    return {
      images
    };
  }
  methods: {
    show() {
      this.$viewerApi({
        images: this.images,
      })
    },
  },
})
</script>