ImgPreview 图片预览

优质

小牛编辑

127浏览

2023-12-01

使用指南

组件介绍

ImgPreview 和其他组件不同，不是通过 HTML 结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。。

引入方式

import { ImgPreview } from 'feart';

代码演示

预览图片

ImgPreview({
  images: [
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview1.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview2.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview3.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview4.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview5.jpg',
  ],
});

指定初始位置

ImgPreview({
  images: [
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview1.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview2.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview3.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview4.jpg',
    'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview5.jpg',
  ],
  startPosition: 1,
});

组件内调用

引入 ImgPreview 组件后，会自动在 Vue 的 prototype 上挂载 $imgpreview 方法，便于在组件内调用。

mounted() {
  this.$imgpreview({
    images: [
      'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview1.jpg',
      'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview2.jpg',
      'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview3.jpg',
      'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview4.jpg',
      'https://nuofe.nntest.cn/feart/images/demoimgs/img-preview5.jpg',
    ]
  });
}

API

参数	说明	类型	默认值	可选值
images	需要预览的图片 URL 数组	`Array`	`[]`	`-`
startPosition	图片预览起始位置索引	`Number`	`0`	`-`
asyncClose	是否开启异步关闭	`Boolean`	`false`	`true`，`false`
ImgPreview.clear	全局关闭所有	`Function`	-
-	-	-	-	-

Events

事件名	说明	回调参数	备注
close	主动关闭（配合 asyncClose）	-	-
onClose	关闭时触发	{index,url}	-
onChange	切换时调用	`index`	-
-	-	-	-

onClose 回调参数

参数名	说明	类型	备注
index	当前图片的索引值	`Number`	-
url	当前图片 URL	`String`	-