feat(image-preview): taro 端新增 long-press 事件 & 新增长按保存相册 demo (#2592) (#…

…2613) --------- Co-authored-by: ntnyq <[email protected]>
jdf2e · Nov 3, 2023 · 19f5248 · 19f5248
1 parent f38cd65
commit 19f5248
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 10 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/imagepreview/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/imagepreview/index.vue
@@ -19,6 +19,16 @@
     />
     <nut-cell isLink title="设置轮播指示器及颜色" :showIcon="true" @click="showFn(3)"></nut-cell>
 
+    <h2>长按图片事件，保存到相册</h2>
+    <nut-image-preview
+      :show="showPreview5"
+      :images="imgData"
+      @close="hideFn(5)"
+      :isLoop="false"
+      @long-press="longPress"
+    />
+    <nut-cell isLink title="长按图片事件，保存到相册" :showIcon="true" @click="showFn(5)"></nut-cell>
+
     <!-- <h2>视频、图片预览</h2>
     <nut-image-preview :show="showPreview4" :videos="videoData" :images="imgData" @close="hideFn(4)" />
     <nut-cell isLink title="视频、图片预览" :showIcon="true" @click="showFn(4)"></nut-cell> -->
@@ -41,6 +51,7 @@ export default {
       showPreview2: false,
       showPreview3: false,
       showPreview4: false,
+      showPreview5: false,
       imgData: [
         {
           src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg'
@@ -78,9 +89,9 @@ export default {
         }
       ]
     });
-    const onClose = () => {
-      console.log('imagepreview closed');
-    };
+    // const onClose = () => {
+    //   console.log('imagepreview closed');
+    // };
 
     const showFn = (i: number) => {
       (resData as any)['showPreview' + i] = true;
@@ -98,11 +109,28 @@ export default {
       (resData as any)['showPreview' + i] = false;
     };
 
+    const longPress = (image: { src: string }) => {
+      Taro.getImageInfo({
+        src: image.src,
+        success: (res) => {
+          Taro.saveImageToPhotosAlbum({
+            filePath: res.path,
+            success: () => {
+              Taro.showToast({
+                title: '保存成功'
+              });
+            }
+          });
+        }
+      });
+    };
+
     return {
       ...toRefs(resData),
       showFn,
       hideFn,
-      env
+      env,
+      longPress
       // fnShow
     };
   }

diff --git a/src/packages/__VUE/imagepreview/doc.taro.md b/src/packages/__VUE/imagepreview/doc.taro.md
@@ -174,6 +174,69 @@ app.use(ImagePreview);
 
 :::
 
+### 长按图片事件，保存到相册
+
+小程序中，需要给这两个API：`getImageInfo`,`saveImageToPhotosAlbum`，设置隐私权限；网络图片需先配置download域名才能生效。
+
+:::demo
+
+```html
+<template>
+  <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" @long-press="longPress" />
+  <nut-cell isLink title="长按图片事件，保存到相册" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, toRefs } from 'vue';
+  import Taro from '@tarojs/taro';
+  const resData = reactive({
+    showPreview: false,
+    imgData: [
+      {
+        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'
+      }
+    ]
+  });
+
+  const { showPreview, imgData } = toRefs(resData);
+
+  const showFn = () => {
+    resData.showPreview = true;
+  };
+
+  const hideFn = () => {
+    resData.showPreview = false;
+  };
+
+  const longPress = (image: { src: string }) => {
+    Taro.getImageInfo({
+      src: image.src,
+      success: (res) => {
+        Taro.saveImageToPhotosAlbum({
+          filePath: res.path,
+          success: () => {
+            Taro.showToast({
+              title: '保存成功'
+            });
+          }
+        });
+      }
+    });
+  };
+</script>
+```
+
+:::
+
 ## API
 
 ### Props
@@ -208,10 +271,11 @@ app.use(ImagePreview);
 
 ### Events
 
-| 事件名 | 说明                       | 回调参数           |
-| ------ | -------------------------- | ------------------ |
-| close  | 点击遮罩关闭图片预览时触发 | 无                 |
-| change | 切换图片时触发             | index:当前图片索引 |
+| 事件名     | 说明                       | 回调参数                         |
+| ---------- | -------------------------- | -------------------------------- |
+| close      | 点击遮罩关闭图片预览时触发 | 无                               |
+| change     | 切换图片时触发             | index:当前图片索引               |
+| long-press | 小程序长按图片触发的事件   | (image: { src: string }) => void |
 
 ### Slots
 

diff --git a/src/packages/__VUE/imagepreview/index.taro.vue b/src/packages/__VUE/imagepreview/index.taro.vue
@@ -14,7 +14,14 @@
         @change="setActive"
       >
         <nut-swiper-item v-for="(item, index) in images" :key="index">
-          <img :src="item.src" mode="aspectFit" class="nut-image-preview-img" @click.stop="closeOnImg" />
+          <img
+            :src="item.src"
+            mode="aspectFit"
+            class="nut-image-preview-img"
+            @longPress="longPress(item)"
+            @longTap="longPress(item)"
+            @click.stop="closeOnImg"
+          />
         </nut-swiper-item>
       </nut-swiper>
     </view>
@@ -85,7 +92,7 @@ export default create({
       default: true
     }
   },
-  emits: ['close', 'change'],
+  emits: ['close', 'change', 'longPress'],
   components: {
     [Popup.name]: Popup,
     [Swiper.name]: Swiper,
@@ -243,6 +250,10 @@ export default create({
       }
     };
 
+    const longPress = (image: ImageInterface) => {
+      emit('longPress', image);
+    };
+
     const init = () => {
       state.eleImg = document.querySelector('.nut-image-preview');
       document.addEventListener('touchmove', onTouchMove);
@@ -282,6 +293,7 @@ export default create({
       onTouchEnd,
       getDistance,
       scaleNow,
+      longPress,
       styles
     };
   }

diff --git a/src/packages/__VUE/imagepreview/index.ts b/src/packages/__VUE/imagepreview/index.ts
@@ -29,6 +29,7 @@ export class ImagePreviewOptions {
   isLoop?: boolean = true;
   onClose?(): void;
   onChange?(index: number): void;
+  onLongPress?(image: ImageInterface): void;
   teleport?: string | HTMLElement = 'body';
 }