一、说明

v-viewer

用于图片浏览的vue组件，支持旋转、缩放、翻转等操作，基于viewer.js

说明文档：mirari.cc/categories/…

在线演示地址：mirari.cc/v-viewer/

viewer.js

基于javaScript的图片预览插件

github地址：github.com/fengyuanche…

在线演示地址：fengyuanchen.github.io/viewerjs/

二、下载及引入

npm下载

npm install v-viewer@1.6.4 -save

全局引入

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)

三、简单使用

新建文件PicturePreview.vue-->在同一文件夹下放入演示图片picture1.jpg、picture2.jpg-->以require("图片地址")方式引入图片。代码如下

<template>
  <div>
    <span>单图使用</span>
    <viewer>
      <img :src="cover" style="cursor: pointer" height="80px" />
    </viewer>
    <span>多图使用</span>
    <viewer :images="imgList">
      <img
        v-for="(imgSrc, index) in imgList"
        :key="index + 'img'"
        :src="imgSrc"
        style="height: 80px"
      />
    </viewer>
  </div>
</template>

<script>
export default {
  name: "PicturePreview",
  data() {
    return {
      cover: require("./picture1.jpg"),
      imgList: [require("./picture1.jpg"), require("./picture2.jpg")],
    };
  },
};
</script>

四、效果图

五、相关文章

blog.csdn.net/ZHANGYANG_1…