fix: 解决 imagepreview 视频点击关闭蒙层问题 (#1783)

* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题

* fix: 地址关闭时, Close 事件触发两次问题解决

* feat: 组件DatePicker 添加双向绑定

* docs: 组件Picker文档修改

* feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom

* feat: imagepreview

* fix: 组件imagepreview点击视频遮罩关闭(#1729)

src/packages/__VUE/imagepreview/doc.en-US.md

@@ -321,6 +321,7 @@ app.use(ImagePreview);
 | before-close`v3.1.22`  | Callback function before close   | (active: number) => boolean | Promise<`boolean`>  | -  | 
 | max-zoom`v3.1.23`  | Max zoom`Taro isn't supported`   | Number  | 3  | 
 | min-zoom`v3.1.23`  | Min zoom`Taro isn't supported`   | Number  | 1/3  | 
+| is-Loop`v3.2.5`  | Whether to loop   | Boolean  | `true`  | 
 
 ### Data Structure of ImageArray 
 

src/packages/__VUE/imagepreview/doc.md

@@ -317,6 +317,7 @@ app.use(ImagePreview);
 | before-close`v3.1.22`  | 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise   | (active: number) => boolean | Promise<`boolean`>  | -  | 
 | max-zoom`v3.1.23`  | 手势缩放时，最大缩放比例`小程序暂不支持`   | Number  | 3  | 
 | min-zoom`v3.1.23`  | 手势缩放时，最小缩放比例`小程序暂不支持`   | Number  | 1/3  | 
+| is-Loop`v3.2.5`  | 是否循环播放   | Boolean  | `true`  | 
 
 
 ### ImageArray 数据结构

src/packages/__VUE/imagepreview/imagePreviewItem.vue

@@ -1,10 +1,26 @@
 <template>
-  <nut-swiper-item @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
-    <view :style="imageStyle" class="nut-imagepreview-box" v-if="image && image.src">
+  <nut-swiper-item @click="closeSwiper">
+    <view
+      :style="imageStyle"
+      class="nut-imagepreview-box"
+      v-if="image && image.src"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
+    >
       <img :src="image.src" class="nut-imagepreview-img" @load="imageLoad" />
     </view>
 
-    <view class="nut-imagepreview-box" v-if="video && video.source">
+    <view
+      class="nut-imagepreview-box"
+      v-if="video && video.source"
+      @click="videoClick"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
+    >
       <nut-video :source="video.source" :options="video.options"></nut-video>
     </view>
   </nut-swiper-item>
@@ -215,6 +231,9 @@ export default create({
     };
 
     const checkTap = () => {
+      if (fingerNum == 1 && props.video && props.video.source) {
+        return;
+      }
       if (fingerNum > 1) {
         return;
       }
@@ -239,6 +258,7 @@ export default create({
     };
 
     const onTouchEnd = (event: TouchEvent) => {
+      console.log('ontauchend');
       let stopPropagation = false;
 
       /* istanbul ignore else */
@@ -291,6 +311,13 @@ export default create({
 
     const clamp = (num: number, min: number, max: number): number => Math.min(Math.max(num, min), max);
 
+    // 视频点击
+    const closeSwiper = (event: any) => {
+      console.log('关闭视频');
+      // event.preventDefault();
+      emit('close');
+    };
+
     watch(() => props.initNo, resetScale);
     watch(
       () => props.show,
@@ -308,7 +335,8 @@ export default create({
       onTouchEnd,
       getDistance,
       imageStyle,
-      imageLoad
+      imageLoad,
+      closeSwiper
     };
   }
 });

src/packages/__VUE/imagepreview/index.taro.vue

@@ -6,7 +6,7 @@
         v-if="showPop"
         :auto-play="autoplay"
         class="nut-imagepreview-swiper"
-        :loop="true"
+        :loop="isLoop"
         :is-preventDefault="false"
         direction="horizontal"
         @change="slideChangeEnd"
@@ -84,7 +84,11 @@ export default create({
       type: String,
       default: 'top-right' // top-right  top-left
     },
-    beforeClose: Function
+    beforeClose: Function,
+    isLoop: {
+      type: Boolean,
+      default: true
+    }
   },
   emits: ['close', 'change'],
   components: {

src/packages/__VUE/imagepreview/index.vue

@@ -13,7 +13,7 @@
         v-if="showPop"
         :auto-play="autoplay"
         class="nut-imagepreview-swiper"
-        :loop="true"
+        :loop="isLoop"
         :is-preventDefault="false"
         direction="horizontal"
         @change="slideChangeEnd"
@@ -130,6 +130,10 @@ export default create({
     maxZoom: {
       type: Number,
       default: 3
+    },
+    isLoop: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['close', 'change'],

src/packages/__VUE/swiper/demo.vue

@@ -3,9 +3,7 @@
     <h2>{{ translate('basic') }}</h2>
     <view class="demo-box">
       <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
+        <nut-swiper-item v-for="item in list" :key="item"> <img :src="item" alt="" /> </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>{{ translate('asyc') }}</h2>
@@ -182,6 +180,7 @@ export default createDemo({
     const handleNext = () => {
       swiper.value.next();
     };
+
     onMounted(() => {
       setTimeout(() => {
         state.list1 = state.list.slice();

src/packages/__VUE/swiperitem/index.scss

@@ -1,6 +1,6 @@
 .nut-swiper-item {
   height: 100%;
   img {
-    pointer-events: none;
+    // pointer-events: none;
   }
 }

src/sites/mobile-taro/vue/src/exhibition/pages/imagepreview/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-imagepreview :show="showPreview1" :images="imgData" @close="hideFn(1)" />
+    <nut-imagepreview :show="showPreview1" :images="imgData" @close="hideFn(1)" :isLoop="false" />
     <nut-cell isLink title="展示图片预览" :showIcon="true" @click="showFn(1)"></nut-cell>
 
     <h2>设置初始页码</h2>