chore(imagepreview): modify class name

src/packages/__VUE/imagepreview/__tests__/imagepreview.spec.ts

@@ -60,7 +60,7 @@ test('basic usage test', async () => {
     }
   });
   await nextTick();
-  expect((wrapper.find('.nut-imagepreview-custom-pop').element as any).style.display).toEqual('');
+  expect((wrapper.find('.nut-image-preview-custom-pop').element as any).style.display).toEqual('');
 });
 
 test('test autoplay', async () => {
@@ -90,7 +90,7 @@ test('init page No.', async () => {
     }
   });
   await nextTick();
-  expect(wrapper.find('.nut-imagepreview-index').text()).toEqual('4 / 4');
+  expect(wrapper.find('.nut-image-preview-index').text()).toEqual('4 / 4');
 });
 
 test('customize pagination and color', async () => {

src/packages/__VUE/imagepreview/imagePreviewItem.vue

@@ -2,13 +2,13 @@
   <nut-swiper-item @click="closeSwiper">
     <view
       :style="imageStyle"
-      class="nut-imagepreview-box"
+      class="nut-image-preview-box"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
       @touchcancel="onTouchEnd"
     >
-      <img v-if="image && image.src" :src="image.src" class="nut-imagepreview-img" @load="imageLoad" />
+      <img v-if="image && image.src" :src="image.src" class="nut-image-preview-img" @load="imageLoad" />
       <nut-video v-if="video && video.source" :source="video.source" :options="video.options"></nut-video>
     </view>
   </nut-swiper-item>

src/packages/__VUE/imagepreview/index.scss

@@ -1,4 +1,4 @@
-.nut-imagepreview {
+.nut-image-preview {
   height: 100%;
   width: 100%;
   &-swiper {
@@ -59,20 +59,20 @@
     background-color: transparent;
   }
 }
-.nut-imagepreview-custom-pop {
+.nut-image-preview-custom-pop {
   height: 100%;
   background: transparent !important;
   display: flex;
   align-items: center;
   width: 100%;
 }
-.nut-imagepreview-swiper .nut-swiper-item {
+.nut-image-preview-swiper .nut-swiper-item {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 
-  .nut-imagepreview-box {
+  .nut-image-preview-box {
     width: 100%;
   }
 

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

@@ -1,10 +1,10 @@
 <template>
-  <nut-popup pop-class="nut-imagepreview-custom-pop" v-model:visible="showPop" @closed="onClose">
-    <view class="nut-imagepreview" @touchstart.capture="onTouchStart">
+  <nut-popup pop-class="nut-image-preview-custom-pop" v-model:visible="showPop" @closed="onClose">
+    <view class="nut-image-preview" @touchstart.capture="onTouchStart">
       <nut-swiper
         v-if="showPop"
         :auto-play="autoplay"
-        class="nut-imagepreview-swiper"
+        class="nut-image-preview-swiper"
         :loop="isLoop"
         :is-preventDefault="false"
         direction="horizontal"
@@ -14,14 +14,14 @@
         :pagination-color="paginationColor"
       >
         <nut-swiper-item v-for="(item, index) in images" :key="index" @click="onClose">
-          <image mode="aspectFit" :src="item.src" class="nut-imagepreview-taro-img" v-if="ENV != ENV_TYPE.WEB" />
-          <img :src="item.src" mode="aspectFit" class="nut-imagepreview-img" v-else />
+          <image mode="aspectFit" :src="item.src" class="nut-image-preview-taro-img" v-if="ENV != ENV_TYPE.WEB" />
+          <img :src="item.src" mode="aspectFit" class="nut-image-preview-img" v-else />
         </nut-swiper-item>
       </nut-swiper>
     </view>
 
-    <view class="nut-imagepreview-index" v-if="showIndex"> {{ active + 1 }} / {{ images.length }} </view>
-    <view class="nut-imagepreview-close-icon" @click="onClose" :style="styles" v-if="closeable"
+    <view class="nut-image-preview-index" v-if="showIndex"> {{ active + 1 }} / {{ images.length }} </view>
+    <view class="nut-image-preview-close-icon" @click="onClose" :style="styles" v-if="closeable"
       ><nut-icon :name="closeIcon" v-bind="$attrs" color="#ffffff"></nut-icon
     ></view>
   </nut-popup>
@@ -251,7 +251,7 @@ export default create({
     };
 
     const init = () => {
-      state.eleImg = document.querySelector('.nut-imagepreview');
+      state.eleImg = document.querySelector('.nut-image-preview');
       document.addEventListener('touchmove', onTouchMove);
       document.addEventListener('touchend', onTouchEnd);
       document.addEventListener('touchcancel', onTouchEnd);

src/packages/__VUE/imagepreview/index.vue

@@ -1,17 +1,17 @@
 <template>
   <nut-popup
-    pop-class="nut-imagepreview-custom-pop"
+    pop-class="nut-image-preview-custom-pop"
     v-model:visible="showPop"
     :teleportDisable="teleportDisable"
     :teleport="teleport"
     @closed="onClose"
     lock-scroll
   >
-    <view class="nut-imagepreview" ref="swipeRef">
+    <view class="nut-image-preview" ref="swipeRef">
       <nut-swiper
         v-if="showPop"
         :auto-play="autoplay"
-        class="nut-imagepreview-swiper"
+        class="nut-image-preview-swiper"
         :loop="isLoop"
         :is-preventDefault="false"
         direction="horizontal"
@@ -35,7 +35,7 @@
         ></image-preview-item>
       </nut-swiper>
     </view>
-    <view class="nut-imagepreview-index" v-if="showIndex"> {{ active + 1 }} / {{ mergeImages.length }} </view>
+    <view class="nut-image-preview-index" v-if="showIndex"> {{ active + 1 }} / {{ mergeImages.length }} </view>
     <view :class="iconClasses" @click="onClose" v-if="closeable"
       ><nut-icon :name="closeIcon" v-bind="$attrs" color="#ffffff"></nut-icon
     ></view>
@@ -102,9 +102,9 @@ export default create({
     });
 
     const iconClasses = computed(() => {
-      const pre = 'nut-imagepreview-close';
+      const pre = 'nut-image-preview-close';
       const iconn = props.closeIconPosition == 'top-right' ? `${pre}-right` : `${pre}-left`;
-      return `nut-imagepreview-close-icon ${iconn}`;
+      return `nut-image-preview-close-icon ${iconn}`;
     });
 
     const mergeImages = computed(() => {