From f4290318923cfc3bfd88a6a61eb646a7490634f9 Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Fri, 4 Nov 2022 15:12:23 +0800
Subject: [PATCH 1/3] docs(image-viewer): update demo

---
 src/image-viewer/demos/base.vue       | 47 +++++++++++------------
 src/image-viewer/demos/closeBtn.vue   | 46 +++++++++++-----------
 src/image-viewer/demos/closeEvent.vue | 52 ++++++++++++-------------
 src/image-viewer/demos/mobile.vue     | 55 ++++-----------------------
 4 files changed, 79 insertions(+), 121 deletions(-)

diff --git a/src/image-viewer/demos/base.vue b/src/image-viewer/demos/base.vue
index 73a19817d..4dd9e399d 100644
--- a/src/image-viewer/demos/base.vue
+++ b/src/image-viewer/demos/base.vue
@@ -1,29 +1,28 @@
 <template>
-  <div>
-    <t-cell-group class="dialog-type-title" title="基础用法">
-      <t-cell value-align="left">
-        <t-button block size="large" variant="outline" @click="tapShow"> 基础用法 </t-button>
-        <t-image-viewer v-model:images="images" v-model:visible="showViewer"></t-image-viewer>
-      </t-cell>
-    </t-cell-group>
+  <div class="image-viewer-demo">
+    <t-button block size="large" variant="outline" @click="tapShow"> 基础用法 </t-button>
+    <t-image-viewer v-model:images="images" v-model:visible="showViewer"></t-image-viewer>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent, Ref } from 'vue';
+<script lang="ts" setup>
+import { ref, Ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const images: Ref<Array<string>> = ref([
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-    ]);
-    const showViewer = ref(false);
-
-    function tapShow() {
-      showViewer.value = true;
-    }
-    return { images, showViewer, tapShow };
-  },
-});
+const showViewer = ref(false);
+const images: Ref<Array<string>> = ref([
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+]);
+const tapShow = () => {
+  showViewer.value = true;
+};
 </script>
+<style lang="less" scoped>
+.image-viewer-demo {
+  margin: 0 16px;
+  button {
+    margin-bottom: 16px;
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/src/image-viewer/demos/closeBtn.vue b/src/image-viewer/demos/closeBtn.vue
index ff7c15771..949a1d224 100644
--- a/src/image-viewer/demos/closeBtn.vue
+++ b/src/image-viewer/demos/closeBtn.vue
@@ -1,29 +1,29 @@
 <template>
-  <div>
-    <t-cell-group class="dialog-type-title" title="不展示关闭按钮">
-      <t-cell value-align="left">
-        <t-button block size="large" variant="outline" @click="tapShow">不展示关闭按钮</t-button>
-        <t-image-viewer v-model:images="images" v-model:visible="showViewer" :close-btn="false"></t-image-viewer>
-      </t-cell>
-    </t-cell-group>
+  <div class="image-viewer-demo">
+    <t-button block size="large" variant="outline" @click="tapShow">不展示关闭按钮</t-button>
+    <t-image-viewer v-model:images="images" v-model:visible="showViewer" :close-btn="false"></t-image-viewer>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent, Ref } from 'vue';
+<script lang="ts" setup>
+import { ref, Ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const images: Ref<Array<string>> = ref([
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-    ]);
-    const showViewer = ref(false);
+const images: Ref<Array<string>> = ref([
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+]);
+const showViewer = ref(false);
 
-    function tapShow() {
-      showViewer.value = true;
-    }
-    return { images, showViewer, tapShow };
-  },
-});
+function tapShow() {
+  showViewer.value = true;
+}
 </script>
+<style lang="less" scoped>
+.image-viewer-demo {
+  margin: 0 16px;
+  button {
+    margin-bottom: 16px;
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/src/image-viewer/demos/closeEvent.vue b/src/image-viewer/demos/closeEvent.vue
index 1bdd9094c..1d0462a4b 100644
--- a/src/image-viewer/demos/closeEvent.vue
+++ b/src/image-viewer/demos/closeEvent.vue
@@ -1,33 +1,33 @@
 <template>
-  <div>
-    <t-cell-group class="dialog-type-title" title="监听关闭事件">
-      <t-cell value-align="left">
-        <t-button block size="large" variant="outline" @click="tapShow">监听关闭事件</t-button>
-        <t-image-viewer v-model:images="images" v-model:visible="showViewer" @close="onClose"></t-image-viewer>
-      </t-cell>
-    </t-cell-group>
+  <div class="image-viewer-demo">
+    <t-button block size="large" variant="outline" @click="tapShow">监听关闭事件</t-button>
+    <t-image-viewer v-model:images="images" v-model:visible="showViewer" @close="onClose"></t-image-viewer>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent, Ref } from 'vue';
+<script lang="ts" setup>
+import { ref, Ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const images: Ref<Array<string>> = ref([
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-    ]);
-    const showViewer = ref(false);
+const images: Ref<Array<string>> = ref([
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+  'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
+]);
+const showViewer = ref(false);
 
-    function tapShow() {
-      showViewer.value = true;
-    }
+function tapShow() {
+  showViewer.value = true;
+}
 
-    function onClose(context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent | KeyboardEvent }) {
-      console.log('onClose: ', context);
-    }
-    return { images, showViewer, tapShow, onClose };
-  },
-});
+function onClose(context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent | KeyboardEvent }) {
+  console.log('onClose: ', context);
+}
 </script>
+<style lang="less" scoped>
+.image-viewer-demo {
+  margin: 0 16px;
+  button {
+    margin-bottom: 16px;
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/src/image-viewer/demos/mobile.vue b/src/image-viewer/demos/mobile.vue
index fa461a067..8880ea124 100644
--- a/src/image-viewer/demos/mobile.vue
+++ b/src/image-viewer/demos/mobile.vue
@@ -3,55 +3,14 @@
     <h1 class="title">ImageViewer 图片预览</h1>
     <p class="summary">图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范</p>
     <tdesign-demo-block title="01 类型" summary="图片预览类型">
-      <div class="image-viewer-demo">
-        <t-button block size="large" variant="outline" @click="tapShowBasic"> 基础用法 </t-button>
-        <t-button block size="large" variant="outline" @click="tapShowCloseBtn"> 不展示关闭按钮 </t-button>
-        <t-button block size="large" variant="outline" @click="tapShowCloseEvent"> 监听关闭事件 </t-button>
-      </div>
+      <BaseDemo />
+      <CloseBtnDemo />
+      <CloseEventDemo />
     </tdesign-demo-block>
-    <t-image-viewer v-model:images="images" v-model:visible="showViewer"></t-image-viewer>
-    <t-image-viewer v-model:images="images" v-model:visible="showViewer2" :close-btn="false"></t-image-viewer>
-    <t-image-viewer v-model:images="images" v-model:visible="showViewer3" @close="onClose"></t-image-viewer>
   </div>
 </template>
-<script lang="ts">
-import { ref, defineComponent, Ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const images: Ref<Array<string>> = ref([
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1606728019829_yw760ok1jmpbep14i.png',
-    ]);
-    const showViewer = ref(false);
-    const showViewer2 = ref(false);
-    const showViewer3 = ref(false);
-
-    function tapShowBasic() {
-      showViewer.value = true;
-    }
-    function tapShowCloseBtn() {
-      showViewer2.value = true;
-    }
-
-    function tapShowCloseEvent() {
-      showViewer3.value = true;
-    }
-
-    function onClose(context: any) {
-      console.log('onClose: ', context);
-    }
-
-    return { images, showViewer, showViewer2, showViewer3, tapShowBasic, tapShowCloseBtn, tapShowCloseEvent, onClose };
-  },
-});
+<script lang="ts" setup>
+import BaseDemo from './base.vue';
+import CloseBtnDemo from './closeBtn.vue';
+import CloseEventDemo from './closeEvent.vue';
 </script>
-<style lang="less" scoped>
-.image-viewer-demo {
-  margin: 0 16px;
-  .t-button {
-    margin-bottom: 16px;
-  }
-}
-</style>

From ac74a6f0694c8f909b7ea206fc86a5b927c10b0e Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Fri, 4 Nov 2022 15:19:24 +0800
Subject: [PATCH 2/3] fix(image-viewer): update snap

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 367 +++++++-----------
 1 file changed, 140 insertions(+), 227 deletions(-)

diff --git a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
index 5f6061050..d51a25830 100644
--- a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
@@ -72,212 +72,119 @@ exports[`ImageViewer > ImageViewer backgroundVue demo works fine 1`] = `
 `;
 
 exports[`ImageViewer > ImageViewer baseVue demo works fine 1`] = `
-<div>
-  <div
-    class="t-cell-group dialog-type-title"
+<div
+  class="image-viewer-demo"
+  data-v-734c791c=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    data-v-734c791c=""
+    role="button"
   >
-    <div
-      class="t-cell-group__title"
+    <!---->
+    <span
+      class="t-button__text"
     >
       
-      基础用法
+       基础用法 
       
-    </div>
+    </span>
+  </button>
+  <transition-stub
+    appear="false"
+    class="t-image-viewer"
+    css="true"
+    data-v-734c791c=""
+    name="t-overlay"
+    persisted="true"
+  >
     <div
-      class="t-cell-group__container"
+      class="t-overlay"
+      style="z-index: 1000; transition-duration: 300ms; display: none;"
     >
       
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-        value-align="left"
-      >
-        <div
-          class="t-cell__left-icon"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <!--v-if-->
-        <div
-          class="t-cell__note"
-        >
-          
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-            role="button"
-          >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-               基础用法 
-              
-            </span>
-          </button>
-          <transition-stub
-            appear="false"
-            class="t-image-viewer"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-          
-        </div>
-        <!--v-if-->
-      </div>
       
     </div>
-  </div>
+  </transition-stub>
 </div>
 `;
 
 exports[`ImageViewer > ImageViewer closeBtnVue demo works fine 1`] = `
-<div>
-  <div
-    class="t-cell-group dialog-type-title"
+<div
+  class="image-viewer-demo"
+  data-v-04bcb836=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    data-v-04bcb836=""
+    role="button"
   >
-    <div
-      class="t-cell-group__title"
+    <!---->
+    <span
+      class="t-button__text"
     >
       
       不展示关闭按钮
       
-    </div>
+    </span>
+  </button>
+  <transition-stub
+    appear="false"
+    class="t-image-viewer"
+    css="true"
+    data-v-04bcb836=""
+    name="t-overlay"
+    persisted="true"
+  >
     <div
-      class="t-cell-group__container"
+      class="t-overlay"
+      style="z-index: 1000; transition-duration: 300ms; display: none;"
     >
       
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-        value-align="left"
-      >
-        <div
-          class="t-cell__left-icon"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <!--v-if-->
-        <div
-          class="t-cell__note"
-        >
-          
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-            role="button"
-          >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              不展示关闭按钮
-              
-            </span>
-          </button>
-          <transition-stub
-            appear="false"
-            class="t-image-viewer"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-          
-        </div>
-        <!--v-if-->
-      </div>
       
     </div>
-  </div>
+  </transition-stub>
 </div>
 `;
 
 exports[`ImageViewer > ImageViewer closeEventVue demo works fine 1`] = `
-<div>
-  <div
-    class="t-cell-group dialog-type-title"
+<div
+  class="image-viewer-demo"
+  data-v-3939d0e3=""
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    data-v-3939d0e3=""
+    role="button"
   >
-    <div
-      class="t-cell-group__title"
+    <!---->
+    <span
+      class="t-button__text"
     >
       
       监听关闭事件
       
-    </div>
+    </span>
+  </button>
+  <transition-stub
+    appear="false"
+    class="t-image-viewer"
+    css="true"
+    data-v-3939d0e3=""
+    name="t-overlay"
+    persisted="true"
+  >
     <div
-      class="t-cell-group__container"
+      class="t-overlay"
+      style="z-index: 1000; transition-duration: 300ms; display: none;"
     >
       
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-        value-align="left"
-      >
-        <div
-          class="t-cell__left-icon"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <!--v-if-->
-        <div
-          class="t-cell__note"
-        >
-          
-          <button
-            aria-disabled="false"
-            class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-            role="button"
-          >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              监听关闭事件
-              
-            </span>
-          </button>
-          <transition-stub
-            appear="false"
-            class="t-image-viewer"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-          
-        </div>
-        <!--v-if-->
-      </div>
       
     </div>
-  </div>
+  </transition-stub>
 </div>
 `;
 
@@ -424,23 +331,19 @@ exports[`ImageViewer > ImageViewer initialIndexVue demo works fine 1`] = `
 exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
-  data-v-ef8302fa=""
 >
   <h1
     class="title"
-    data-v-ef8302fa=""
   >
     ImageViewer 图片预览
   </h1>
   <p
     class="summary"
-    data-v-ef8302fa=""
   >
     图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范
   </p>
   <div
     class="tdesign-mobile-demo-block"
-    data-v-ef8302fa=""
   >
     <h2
       class="tdesign-mobile-demo-block__title"
@@ -455,12 +358,12 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
     
     <div
       class="image-viewer-demo"
-      data-v-ef8302fa=""
+      data-v-734c791c=""
     >
       <button
         aria-disabled="false"
         class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-ef8302fa=""
+        data-v-734c791c=""
         role="button"
       >
         <!---->
@@ -472,10 +375,31 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
           
         </span>
       </button>
+      <transition-stub
+        appear="false"
+        class="t-image-viewer"
+        css="true"
+        data-v-734c791c=""
+        name="t-overlay"
+        persisted="true"
+      >
+        <div
+          class="t-overlay"
+          style="z-index: 1000; transition-duration: 300ms; display: none;"
+        >
+          
+          
+        </div>
+      </transition-stub>
+    </div>
+    <div
+      class="image-viewer-demo"
+      data-v-04bcb836=""
+    >
       <button
         aria-disabled="false"
         class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-ef8302fa=""
+        data-v-04bcb836=""
         role="button"
       >
         <!---->
@@ -483,14 +407,35 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-           不展示关闭按钮 
+          不展示关闭按钮
           
         </span>
       </button>
+      <transition-stub
+        appear="false"
+        class="t-image-viewer"
+        css="true"
+        data-v-04bcb836=""
+        name="t-overlay"
+        persisted="true"
+      >
+        <div
+          class="t-overlay"
+          style="z-index: 1000; transition-duration: 300ms; display: none;"
+        >
+          
+          
+        </div>
+      </transition-stub>
+    </div>
+    <div
+      class="image-viewer-demo"
+      data-v-3939d0e3=""
+    >
       <button
         aria-disabled="false"
         class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-ef8302fa=""
+        data-v-3939d0e3=""
         role="button"
       >
         <!---->
@@ -498,60 +443,28 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-           监听关闭事件 
+          监听关闭事件
           
         </span>
       </button>
+      <transition-stub
+        appear="false"
+        class="t-image-viewer"
+        css="true"
+        data-v-3939d0e3=""
+        name="t-overlay"
+        persisted="true"
+      >
+        <div
+          class="t-overlay"
+          style="z-index: 1000; transition-duration: 300ms; display: none;"
+        >
+          
+          
+        </div>
+      </transition-stub>
     </div>
     
   </div>
-  <transition-stub
-    appear="false"
-    class="t-image-viewer"
-    css="true"
-    data-v-ef8302fa=""
-    name="t-overlay"
-    persisted="true"
-  >
-    <div
-      class="t-overlay"
-      style="z-index: 1000; transition-duration: 300ms; display: none;"
-    >
-      
-      
-    </div>
-  </transition-stub>
-  <transition-stub
-    appear="false"
-    class="t-image-viewer"
-    css="true"
-    data-v-ef8302fa=""
-    name="t-overlay"
-    persisted="true"
-  >
-    <div
-      class="t-overlay"
-      style="z-index: 1000; transition-duration: 300ms; display: none;"
-    >
-      
-      
-    </div>
-  </transition-stub>
-  <transition-stub
-    appear="false"
-    class="t-image-viewer"
-    css="true"
-    data-v-ef8302fa=""
-    name="t-overlay"
-    persisted="true"
-  >
-    <div
-      class="t-overlay"
-      style="z-index: 1000; transition-duration: 300ms; display: none;"
-    >
-      
-      
-    </div>
-  </transition-stub>
 </div>
 `;

From 778a4b7605bfc8c0432be02d67b61ba881a671b8 Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Mon, 7 Nov 2022 22:30:31 +0800
Subject: [PATCH 3/3] fix(image-viewer): fix cr

---
 src/image-viewer/demos/base.vue       | 1 -
 src/image-viewer/demos/closeBtn.vue   | 1 -
 src/image-viewer/demos/closeEvent.vue | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/image-viewer/demos/base.vue b/src/image-viewer/demos/base.vue
index 4dd9e399d..d0e0c82c3 100644
--- a/src/image-viewer/demos/base.vue
+++ b/src/image-viewer/demos/base.vue
@@ -22,7 +22,6 @@ const tapShow = () => {
   margin: 0 16px;
   button {
     margin-bottom: 16px;
-    background-color: #fff;
   }
 }
 </style>
diff --git a/src/image-viewer/demos/closeBtn.vue b/src/image-viewer/demos/closeBtn.vue
index 949a1d224..3c5f84d60 100644
--- a/src/image-viewer/demos/closeBtn.vue
+++ b/src/image-viewer/demos/closeBtn.vue
@@ -23,7 +23,6 @@ function tapShow() {
   margin: 0 16px;
   button {
     margin-bottom: 16px;
-    background-color: #fff;
   }
 }
 </style>
diff --git a/src/image-viewer/demos/closeEvent.vue b/src/image-viewer/demos/closeEvent.vue
index 1d0462a4b..191d642fa 100644
--- a/src/image-viewer/demos/closeEvent.vue
+++ b/src/image-viewer/demos/closeEvent.vue
@@ -27,7 +27,6 @@ function onClose(context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEv
   margin: 0 16px;
   button {
     margin-bottom: 16px;
-    background-color: #fff;
   }
 }
 </style>