@ophiuchus/image-preview v1.0.1

ImagePreview 图片预览

介绍

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

函数调用

ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。

import ImagePreview from '@ophiuchus/image-preview';

ImagePreview([
  'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
  'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
]);

组件调用

通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。

import Vue from 'vue';
import ImagePreview from '@ophiuchus/image-preview';

// 全局注册
Vue.use(ImagePreview);

// 局部注册
export default {
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};

代码演示

基础用法

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

ImagePreview([
  'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
  'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
  'https://img4.tuhu.org/D3n023kFjjgjYzz87qdh4g_w1600_h1331.jpeg',
  'https://img4.tuhu.org/7QAkLaPgM5ZrueoMigS8ng_w1277_h1600.jpeg',
]);

指定初始位置

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

ImagePreview({
  images: [
    'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
    'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
    'https://img4.tuhu.org/D3n023kFjjgjYzz87qdh4g_w1600_h1331.jpeg',
    'https://img4.tuhu.org/7QAkLaPgM5ZrueoMigS8ng_w1277_h1600.jpeg',
  ],
  startPosition: 1,
});

展示关闭按钮

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

ImagePreview({
  images: [
    'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
    'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
    'https://img4.tuhu.org/D3n023kFjjgjYzz87qdh4g_w1600_h1331.jpeg',
    'https://img4.tuhu.org/7QAkLaPgM5ZrueoMigS8ng_w1277_h1600.jpeg',
  ],
  closeable: true,
});

监听关闭事件

通过 onClose 选项监听图片预览的关闭事件。

import Toast  from '@ophiuchus/toast';

ImagePreview({
  images: [
    'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
    'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
    'https://img4.tuhu.org/D3n023kFjjgjYzz87qdh4g_w1600_h1331.jpeg',
    'https://img4.tuhu.org/7QAkLaPgM5ZrueoMigS8ng_w1277_h1600.jpeg',
  ],
  onClose() {
    Toast('关闭');
  },
});

异步关闭

通过 asyncClose 属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览。

const instance = ImagePreview({
  images: [
    'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
    'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
    'https://img4.tuhu.org/D3n023kFjjgjYzz87qdh4g_w1600_h1331.jpeg',
    'https://img4.tuhu.org/7QAkLaPgM5ZrueoMigS8ng_w1277_h1600.jpeg',
  ],
  asyncClose: true,
});

setTimeout(() => {
  instance.close();
}, 2000);

组件调用

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

<sf-image-preview v-model="show" :images="images" @change="onChange">
  <template v-slot:index>第{ { index } }页</template>
</sf-image-preview>

export default {
  data() {
    return {
      show: false,
      index: 0,
      images: [
        'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
        'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
        'https://img4.tuhu.org/D3n023kFjjgjYzz87qdh4g_w1600_h1331.jpeg',
        'https://img4.tuhu.org/7QAkLaPgM5ZrueoMigS8ng_w1277_h1600.jpeg',
      ],
    };
  },
  methods: {
    onChange(index) {
      this.index = index;
    },
  },
};

API

Options

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

Props

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

Events

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

方法

通过组件调用 ImagePreview 时，通过 ref 可以获取到 ImagePreview 实例并调用实例方法，详见组件实例方法。

Slots

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

onClose 回调参数

onScale 回调参数

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。

常见问题

在桌面端无法操作组件？

参见桌面端适配。