ImagePreview 图片预览

基础用法

直接传入图片数组，即可展示图片预览

  1. ImagePreview([
  2.   'https://img.yzcdn.cn/1.jpg',
  3. ]);

传入配置项

通过传入配置对象，可以指定初始图片的位置、监听关闭事件

  1. const instance = ImagePreview({
  2.   images: [
  3.     'https://img.yzcdn.cn/1.jpg',
  4.     'https://img.yzcdn.cn/2.jpg'
  5.   ],
  6.   asyncClose: true
  7. });
  9. setTimeout(() => {
  10.   instance.close();
  11. }, 1000);

组件调用

如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 Vue.use 注册组件

  1. export default {
  2.   data() {
  3.       show: false,
  4.       index: 0,
  5.       images: [
  6.         'https://img.yzcdn.cn/1.jpg',
  7.         'https://img.yzcdn.cn/2.jpg'
  8.       ]
  9.     };
  12.   methods: {
  13.     onChange(index) {
  14.       this.index = index;
  15.     }
  16.   }

API

Options

通过函数调用 ImagePreview 时，支持传入以下选项：

Events

通过组件调用 ImagePreview 时，支持以下事件：

Slots

通过组件调用 ImagePreview 时，支持以下插槽：