diff --git a/packages/nutui-taro-demo/src/exhibition/pages/imagepreview/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/imagepreview/index.vue
index aa1bacab4c..4344ba5f0c 100644
--- 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 @@
/>
+
长按图片事件,保存到相册
+
+
+
@@ -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
index 64fc4ecd66..02d2a657c2 100644
--- 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
+
+
+
+
+
+
+```
+
+:::
+
## 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
index f02d5f3fb0..9f07686045 100644
--- a/src/packages/__VUE/imagepreview/index.taro.vue
+++ b/src/packages/__VUE/imagepreview/index.taro.vue
@@ -14,7 +14,14 @@
@change="setActive"
>
-
+
@@ -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
index 8cebc269d5..3e92f8c6ed 100644
--- 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';
}