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.