docs(image): update image demo

re Tencent#413
TingShine · Nov 11, 2022 · 6f40348 · 6f40348
1 parent 9e905c1
commit 6f40348
Show file tree

Hide file tree

Showing 8 changed files with 856 additions and 655 deletions.
diff --git a/src/image/__test__/__snapshots__/demo.test.jsx.snap b/src/image/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/image/__test__/demo.test.jsx b/src/image/__test__/demo.test.jsx
@@ -4,16 +4,14 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/image/demos/base.vue';
-import fitVue from '@/image/demos/fit.vue';
-import lazyVue from '@/image/demos/lazy.vue';
 import mobileVue from '@/image/demos/mobile.vue';
+import sizeVue from '@/image/demos/size.vue';
 import statusVue from '@/image/demos/status.vue';
 
 const mapper = {
   baseVue,
-  fitVue,
-  lazyVue,
   mobileVue,
+  sizeVue,
   statusVue,
 };
 

diff --git a/src/image/demos/base.vue b/src/image/demos/base.vue
@@ -1,13 +1,33 @@
 <template>
   <div class="image-group">
     <div class="image-demo">
-      <t-image class="image-container" alt="一张图片" :src="imageSrc" shape="circle"></t-image>
+      <t-image class="image-container" fit="cover" :src="imageSrc"></t-image>
+      <p class="image-demo-tip">裁切</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" fit="contain" :src="imageSrc"></t-image>
+      <p class="image-demo-tip">适应高</p>
+    </div>
+    <div class="image-demo" style="width: 134px">
+      <t-image class="image-container" fit="fill" :src="imageSrc"></t-image>
+      <p class="image-demo-tip">拉伸</p>
     </div>
+  </div>
+
+  <p class="summary summary-center">圆角样式</p>
+
+  <div class="image-group">
     <div class="image-demo">
       <t-image class="image-container" :src="imageSrc" shape="round"></t-image>
+      <p class="image-demo-tip">方形</p>
     </div>
     <div class="image-demo">
       <t-image class="image-container" :src="imageSrc" shape="square"></t-image>
+      <p class="image-demo-tip">圆角方形</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" alt="一张图片" :src="imageSrc" shape="circle"></t-image>
+      <p class="image-demo-tip">圆形</p>
     </div>
   </div>
 </template>
@@ -35,6 +55,16 @@ const imageSrc = ref('https://tdesign.gtimg.com/site/upload1.png');
       width: 100%;
       height: 72px;
     }
+    .image-demo-tip {
+      color: #646566;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+    }
   }
 }
+
+.summary-center {
+  margin: 16px 0;
+}
 </style>
diff --git a/src/image/demos/fit.vue b/src/image/demos/fit.vue
diff --git a/src/image/demos/lazy.vue b/src/image/demos/lazy.vue
diff --git a/src/image/demos/mobile.vue b/src/image/demos/mobile.vue
@@ -2,25 +2,21 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Image 图片</h1>
     <p class="summary">用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。</p>
-    <tdesign-demo-block title="01 基本类型" summary="图片样式可为圆形、圆角方形、方形">
+    <tdesign-demo-block title="01 类型" summary="裁切样式">
       <BaseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 填充方式" summary="可以个性化设置图片的填充模式和填充位置">
-      <FitDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block title="03 图片状态" summary="加载中提示">
+    <tdesign-demo-block title="02 状态" summary="加载中提示">
       <StatusDemo />
     </tdesign-demo-block>
 
-    <tdesign-demo-block title="04 懒加载" summary="通过设置lazy属性，实现图片懒加载"> <LazyDemo /> </tdesign-demo-block>
+    <tdesign-demo-block title="03 规格" summary="常用图片尺寸"> <SizeDemo /> </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
 import BaseDemo from './base.vue';
-import FitDemo from './fit.vue';
 import StatusDemo from './status.vue';
-import LazyDemo from './lazy.vue';
+import SizeDemo from './size.vue';
 </script>
 
 <style lang="less" scoped>

diff --git a/src/image/demos/size.vue b/src/image/demos/size.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 56px; height: 56px"></t-image>
+      <p class="image-demo-tip">56</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 48px; height: 48px"></t-image>
+      <p class="image-demo-tip">48</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 32px; height: 32px"></t-image>
+      <p class="image-demo-tip">32</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 24px; height: 24px"></t-image>
+      <p class="image-demo-tip">24</p>
+    </div>
+  </div>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 120px; height: 120px"></t-image>
+      <p class="image-demo-tip">120</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 72px; height: 72px"></t-image>
+      <p class="image-demo-tip">72</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const imageSrc = ref('https://tdesign.gtimg.com/site/upload1.png');
+</script>
+
+<style lang="less" scoped>
+.image-group {
+  display: flex;
+  padding: 0 16px;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  .image-demo {
+    margin-bottom: 10px;
+    margin-right: 7%;
+    &:last-child {
+      margin-right: 0;
+    }
+    .image-container {
+      width: 100%;
+      height: 72px;
+    }
+    .image-demo-tip {
+      color: #646566;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/image/demos/status.vue b/src/image/demos/status.vue
@@ -34,10 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
 import { LoadingIcon as TIconLoading } from 'tdesign-icons-vue-next';
-
-const imageSrc = ref('https://tdesign.gtimg.com/site/upload1.png');
 </script>
 
 <style lang="less" scoped>