feat(ImageViewer): add default trigger and simplify demos

packages/components/image-viewer/_example-ts/base.vue

@@ -1,91 +1,12 @@
 <template>
-  <div>
-    <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]">
-        <template #trigger="{ open }">
-          <div class="tdesign-demo-image-viewer__ui-image">
-            <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
-              <span><BrowseIcon size="1.4em" /> 预览</span>
-            </div>
-          </div>
-        </template>
-      </t-image-viewer>
-    </div>
+  <div class="tdesign-demo-image-viewer__base">
+    <t-image-viewer :images="[img]"></t-image-viewer>
   </div>
 </template>
 <script lang="ts" setup>
-import { BrowseIcon } from 'tdesign-icons-vue-next';
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;

packages/components/image-viewer/_example-ts/modeless.vue

@@ -1,94 +1,14 @@
 <template>
   <div class="tdesign-demo-image-viewer__base">
-    <t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
-      <template #trigger>
-        <div class="tdesign-demo-image-viewer__ui-image">
-          <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
-            <span><BrowseIcon size="1.4em" /> 预览</span>
-          </div>
-        </div>
-      </template>
-    </t-image-viewer>
+    <t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { BrowseIcon } from 'tdesign-icons-vue-next';
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
-const visible = ref(false);
-const onOpen = () => (visible.value = true);
 </script>
 
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;

packages/components/image-viewer/_example/base.vue

@@ -1,92 +1,12 @@
 <template>
-  <div>
-    <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]">
-        <template #trigger="{ open }">
-          <div class="tdesign-demo-image-viewer__ui-image">
-            <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
-              <span><BrowseIcon size="1.4em" /> 预览</span>
-            </div>
-          </div>
-        </template>
-      </t-image-viewer>
-    </div>
+  <div class="tdesign-demo-image-viewer__base">
+    <t-image-viewer :images="[img]"></t-image-viewer>
   </div>
 </template>
 <script setup>
-import { BrowseIcon } from 'tdesign-icons-vue-next';
-
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;

packages/components/image-viewer/_example/modeless.vue

@@ -1,96 +1,14 @@
 <template>
   <div class="tdesign-demo-image-viewer__base">
-    <t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
-      <template #trigger>
-        <div class="tdesign-demo-image-viewer__ui-image">
-          <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
-            <span><BrowseIcon size="1.4em" /> 预览</span>
-          </div>
-        </div>
-      </template>
-    </t-image-viewer>
+    <t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { BrowseIcon } from 'tdesign-icons-vue-next';
-
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
-
-const visible = ref(false);
-const onOpen = () => (visible.value = true);
 </script>
 
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;

packages/components/image-viewer/image-viewer.md

@@ -20,7 +20,7 @@ mode | String | modal | 模态预览（modal）和非模态预览（modeless)。
 navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N
 title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义，默认为预览图片的缩略图。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/image-viewer/type.ts) | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
 defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N