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'; }