v-viewer 图片查看器-放大、缩小、旋转

安装依赖 npm install v-viewer --save

组件内引入

import 'viewerjs/dist/viewer.css'

import VueViewer from 'v-viewer'

import Vue from 'vue'

Vue.use(VueViewer)

组件内使用： v-viewer (单图) / <viewer :images="images"> </viewer> （多图）

<template>

<div>

<viewer :images="images"> </viewer>

<el-carousel :interval="5000" arrow="always" style="width:800px">

<el-carousel-item v-for="src in images" :key="src">

<el-image

:src="src"

fit="contain" @click="show"></el-image>

</el-carousel-item>

</el-carousel>

<!-- 在某一个图片上面用图片预览查看器查看图片 -->

<img :src=" require('_a/images/one.webp')" v-viewer>

<!-- api -->

<!-- <button type="button" @click="show">Click to show</button> -->

</div>

</template>

<script>

import 'viewerjs/dist/viewer.css'

import VueViewer from 'v-viewer'

import Vue from 'vue'

Vue.use(VueViewer)

export default {

data() {

return {

images: [

require('_a/images/one.webp'),

require('_a/images/two.webp'),

require('_a/images/three.webp')

]

};

},

methods: {

show() {

this.$viewerApi({

images: this.images,

})

},

},

}

</script>