Package Exports

xes-vue-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (xes-vue-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

xes-vue-viewer

一个 vue2 图片预览组件，支持切换、旋转、缩放等功能，不依赖其他三方库，可以直接使用。注: rollup不适合使用在有图片的工程中

安装

# Yarn
yarn add xes-vue-viewer

# Npm
npm install xes-vue-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	true
close-on-press-escape	是否可以通过按下 ESC 关闭 ImageViewer	boolean	true
initial-index	默认打开的图片索引	number	0
on-switch	切换回调	function(index)	-
showPreNextBar	是否展示上下一页按钮	boolean	false
spaceAction	按空格键是否恢复图片原始大小	boolean	false

Keyboard Operation

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

示例

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

<script>
import xesImageViewer from 'xes-vue-viewer';
import 'xes-vue-viewer/dist/index.css';
export default {
  components: {
      xesImageViewer
  },
  data() {

    return {
      showViewer: false,
      imageIndex: 0,
      imgList: [
        {
          url: '图片地址',
          title: '图片名称', //可以没有
        },
        {
          url: '图片地址',
          title: '图片名称', //可以没有
        },
      ],
    }
  },
  methods: {},
}
</script>

<style></style>