更新记录

1.0.0（2026-04-29） 下载此版本

初始发布

平台兼容性

uni-app(5.0)

sq-img-preview 图片预览组件

一个功能完善的图片预览组件，支持本地和网络图片预览，提供丰富的交互功能。

功能特性

• 🖼️ 支持本地和网络图片预览
• 🔄 双指缩放
• 👆 左右滑动切换图片
• 💾 图片保存功能
• ⚙️ 可自定义功能按钮

使用方法

1. 引入并注册组件

// 在页面的 script 中引入并注册
import SqImgPreview from "@/uni_modules/sq-img-preview/components/sq-img-preview/sq-img-preview.vue";

export default {
  components: {
    SqImgPreview,
  },
};

2. 在模板中使用

<template>
  <view>
    <!-- 你的内容 -->
    <sq-img-preview ref="imagePreview"></sq-img-preview>
  </view>
</template>

3. 调用预览方法

通过 ref 调用组件的 show 方法：

// 调用示例
this.$refs.imagePreview.show(imglist, index, options);

API 参数说明

show(imglist, index, options)

options 配置

可以自定义配置底部功能按钮：

{
  buttons: [
    {
      text: "保存到相册",
      type: "save",
      handler: () => {
        // 自定义处理逻辑
      },
    },
  ];
}

完整示例

<template>
  <view>
    <view class="image-list">
      <image v-for="(img, index) in images" :key="index" :src="img" @click="previewImage(index)" />
    </view>

    <sq-img-preview ref="imagePreview"></sq-img-preview>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: ["https://example.com/image1.jpg", "https://example.com/image2.jpg", "https://example.com/image3.jpg"],
    };
  },
  methods: {
    previewImage(index) {
      this.$refs.imagePreview.show(this.images, index, {
        buttons: [
          {
            text: "保存到相册",
            type: "save",
          },
          {
            text: "分享",
            type: "share",
            handler: () => {
              // 自定义分享逻辑
              console.log("分享图片");
            },
          },
        ],
      });
    },
  },
};
</script>

注意事项

• 确保图片路径正确，支持本地路径和网络 URL
• 网络图片需要配置域名白名单（如在 manifest.json 中配置）
• 保存功能需要相应的权限（如相册访问权限）