0.1.5 • Published 3 years ago
xes-customize-ui
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
# Yarn
yarn add xes-customize-ui
# Npm
npm install xes-customize-ui --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 |
| current-image-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"
:current-image-index="imageIndex"
:show-pre-next-bar="false"
:close-on-press-escape="false"
:img-list="imgList"
/>
</div>
</template>
<script>
import { xesImageViewer } from 'xes-customize-ui';
import 'xes-customize-ui/lib/index.css';
export default {
components: {
xesImageViewer
},
data() {
return {
showViewer: false,
imageIndex: 0,
imgList: [
{
url: '图片地址',
title: '图片名称', //可以没有
},
{
url: '图片地址',
title: '图片名称', //可以没有
},
],
}
},
methods: {},
}
</script>
<style></style>
Customize configuration
See Configuration Reference.