1.0.10 • Published 3 years ago
xes-vue-viewer v1.0.10
xes-vue-viewer
一个 vue2 图片预览组件，支持切换、旋转、缩放等功能，不依赖其他三方库，可以直接使用。 注: rollup不适合使用在有图片的工程中
安装
# Yarn
yarn add xes-vue-viewer
# Npm
npm install xes-vue-viewer --saveAttribute
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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>