Press UI

# ImagePreview 图片预览

图片放大预览，支持函数调用和组件调用两种方式。

# 引入

import PressImagePreview from 'press-ui/press-image-preview/press-image-preview';

export default {
  components: {
    PressImagePreview,
  }
}

# 代码演示

# 基础用法

先在页面中埋入组件，然后函数式调用imagePreview即可。

<ImagePreview
  :id="FUNCTIONAL_ID_MAP.IMAGE_PREVIEW"
  mode="functional"
/>

import ImagePreview from 'press-ui/press-image-preview/press-image-preview.vue';
import { imagePreview } from 'press-ui/press-image-preview/index';


export default {
  components: {
    ImagePreview,
  },
  methods: {
    show() {
      imagePreview({
        selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
        images: this.images,
      }).then(() => {
      });
    }
  }
}

# 指定初始位置

支持传入配置对象，并通过 startPosition 选项指定图片的初始位置（索引值）。

imagePreview({
  selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
  images: this.images,
  startPosition: 1,
})

# 展示关闭按钮

设置 closeable 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 close-icon 属性自定义图标，使用close-icon-position 属性可以自定义图标位置。

imagePreview({
  selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
  images: this.images,
  closeable: true,
})

# 监听关闭事件

imagePreview方法返回的是promise，关闭时状态会变成resolved，可以在then方法中监听。

imagePreview({
  selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
  images: this.images,
  closeable: true,
}).then(() => {
  this.onGTip(this.t('closeTip'));
})

# 异步关闭

通过 asyncClose 属性可以开启异步关闭，开启后异步关闭后，点击图片、蒙层、关闭按钮等，会将promise状态置为rejected，并传入实例对象参数，用户可以调用context.closeDialog方法关闭。

imagePreview({
  selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
  images: this.images,
  asyncClose: true,
}).catch(({ context }) => {
  context.closeDialog();
})

# 组件调用

支持组件调用，父组件需在close时设置show为false。

<ImagePreview
  :show="show"
  closeable
  :start-position="1"
  :images="images"
  :custom-style="customStyle"
  @close="show = false"
/>

# API

# Props

参数 说明 类型 默认值
show 是否显示，函数调用时固定为true boolean false
images 图片列表 array<string> -
start-position 初始位置 number 0
show-index 是否展示索引 boolean false
async-close 是否异步关闭 boolean false
closeable 是否显示关闭图标 boolean false
close-icon 关闭图标名称 string clear
close-icon-position 关闭图标位置 string top-right
custom-style 自定义样式 string -
custom-class 自定义类名 string -
z-index 层级 number 10

# Events

事件名 说明 参数
close 关闭时触发 -
change 切换图片时触发 active(当前索引)

# 在线调试

横屏

← Link →