vue-imgs-viewer

一个 vue2 图片预览组件，支持切换、旋转、缩放等功能，不依赖其他三方库，可以直接使用。

安装

# Yarn
yarn add vue-imgs-viewer

# Npm
npm install vue-imgs-viewer --save

Attribute

参数	说明	类型	默认值
v-model	显示隐藏	boolean	false
img-list	图片数据列表['url'] 或[{url: 'url', title: 'title'}]	array	-
z-index	css 层级	number	2000
close-on-click-mask	是否可以通过点击遮罩关闭 ImageViewer	boolean	false
close-on-press-escape	是否可以通过按下 ESC 关闭 ImageViewer	boolean	true
initial-index	默认打开的图片索引	number	0
on-switch	切换回调	function(index)	-

Keyboard Operation

Keyboard	说明
SPACE(空格键)	切换原图大小或屏幕缩放大小
LEFT_ARROW(左方向键)	切换到上一张图片
RIGHT_ARROW (右方向键)	切换到下一张图片
UP_ARROW(上方向键)	放大图片
DOWN_ARROW(下方向键)	缩小图片

示例

<template>
  <div>
    <button @click="showViewer = true">预览图片</button>
    <imgs-viewer
      v-model="showViewer"
      :initial-index="imageIndex"
      close-on-click-mask
      :closeOnPressEscape="false"
      :img-list="imgList"
    />
  </div>
</template>

<script>
import ImgsViewer from 'vue-imgs-viewer'
import 'vue-imgs-viewer/dist/index.css'
export default {
  components: { ImgsViewer },
  data() {
    return {
      showViewer: false,
      imageIndex: 0,
      imgList: [
        {
          url: '图片地址',
          title: '图片名称', //可以没有
        },
        {
          url: '图片地址',
          title: '图片名称', //可以没有
        },
      ],
    }
  },
  methods: {},
}
</script>

<style></style>