ImagePreview 图片预览

介绍

支持全屏预览图片。

基础用法

<template>
  <nut-image-preview
    :show="show"
    :images="images"
    @close="onClose"
  ></nut-image-preview>
</template>

const show = ref(false);

const images = ref([
  {
    src: "//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg"
  },
  {
    src: "//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png"
  },
  {
    src: "//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg"
  },
  {
    src: "//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg"
  }
]);

function preview() {
  show.value = true;
}

function onClose() {
  show.value = false;
}

设置初始页码

<template>
  <nut-image-preview
    :show="show"
    :images="images"
    :init-no="3"
    @close="onClose"
  ></nut-image-preview>
</template>

设置轮播指示器及颜色

<template>
  <nut-image-preview
    :show="show"
    :images="images"
    pagination-visible
    pagination-color="red"
    @close="onClose"
  ></nut-image-preview>
</template>

长按图片事件，保存到相册

注意，小程序端使用 saveImageToPhotosAlbum 需要用户授权， 详细内容请查看 官方文档。

<template>
  <nut-image-preview
    :show="show"
    :images="images"
    @long-press="onLongPress"
    @close="onClose"
  ></nut-image-preview>
</template>

function onLongPress(image: { src: string }) {
  uni.getImageInfo({
    src: image.src,
    success(res) {
      uni.saveImageToPhotosAlbum({
        filePath: res.path,
        success() {
          uni.showToast({
            title: "保存成功"
          });
        }
      });
    }
  });
}

API

Props

参数	说明	类型	可选值	默认值
show	是否展示预览图片	boolean	-	false
images	预览图片数组	Array	-	[]
autoplay	自动轮播时长（0 表示不会自动轮播）	number / string	-	3000
init-no	初始页码	number	-	0
pagination-visible	分页指示器是否展示	boolean	-	false
pagination-color	分页指示器选中的颜色	string	-	#fff
content-close	点击图片可以退出预览	boolean	-	true
show-index	是否显示页码	boolean	-	true
closeable	是否显示关闭图标	boolean	-	false
close-icon-position	关闭图标位置	string	top-left / top-right	top-right
before-close	关闭前的回调函数（返回 false 可阻止关闭，支持返回 Promise）	Function	-	-
is-loop	是否循环播放	boolean	-	true
scale 1.2.2	是否支持双指缩放	boolean	-	false
show-menu-by-longpress 1.9.4	是否启用小程序长按菜单	boolean	-	false

图片数组数据结构

参数	说明	类型
src	预览图片链接	string

Events

事件名	说明	类型
close	点击遮罩关闭图片预览时触发	() => void
change	切换图片时触发	(index: number) => void
long-press 1.4.0	长按图片触发的事件	(image: { src: string }) => void