docs(Loading): update demo #476

src/loading/__test__/demo.test.jsx

@@ -10,6 +10,7 @@ import horzVue from '@/loading/demos/horz.vue';
 import mobileVue from '@/loading/demos/mobile.vue';
 import pureTextVue from '@/loading/demos/pure-text.vue';
 import sizeVue from '@/loading/demos/size.vue';
+import speedVue from '@/loading/demos/speed.vue';
 import vertVue from '@/loading/demos/vert.vue';
 
 const mapper = {
@@ -20,6 +21,7 @@ const mapper = {
   mobileVue,
   pureTextVue,
   sizeVue,
+  speedVue,
   vertVue,
 };
 

src/loading/demos/bar.vue

@@ -1,43 +1,32 @@
 <template>
-  <div>
-    <t-loading theme="bar" :progress="progress" />
-    <t-button variant="outline" @click.stop="onShowLoadingBar">{{
-      progress > 0 && progress < 1 ? '页面加载中...' : '页面进度条加载'
-    }}</t-button>
-  </div>
+  <t-loading theme="bar" :progress="progress" />
+  <t-button variant="outline" block @click.stop="onShowLoadingBar">{{
+    progress > 0 && progress < 1 ? '页面加载中...' : '页面进度条加载'
+  }}</t-button>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const progress = ref(0);
-    let timer: any;
+const progress = ref(0);
+let timer: any;
 
-    const onShowLoadingBar = () => {
-      if (timer) {
-        return;
-      }
-      progress.value = 0;
-      timer = setInterval(() => {
-        if (progress.value >= 1) {
-          clearInterval(timer);
-          timer = null;
+const onShowLoadingBar = () => {
+  if (timer) {
+    return;
+  }
+  progress.value = 0;
+  timer = setInterval(() => {
+    if (progress.value >= 1) {
+      clearInterval(timer);
+      timer = null;
 
-          setTimeout(() => {
-            progress.value = 0;
-          }, 2000);
-          return;
-        }
-        progress.value += 0.01;
-      }, 100);
-    };
-
-    return {
-      progress,
-      onShowLoadingBar,
-    };
-  },
-});
+      setTimeout(() => {
+        progress.value = 0;
+      }, 2000);
+      return;
+    }
+    progress.value += 0.01;
+  }, 100);
+};
 </script>

src/loading/demos/delay.vue

@@ -1,27 +1,29 @@
 <template>
-  <div>
-    <div class="switch-wrap">
-      <t-switch @change="onChangeLoading"></t-switch>
-      <div>{{ showLoading ? '请求发起，延迟显示loading' : '请求结束，隐藏loading' }}</div>
-    </div>
-    <t-loading :delay="1000" :loading="showLoading" text="加载中..." />
+  <div class="switch-wrap">
+    <t-switch @change="onChangeLoading"></t-switch>
+    <div>{{ showLoading ? '请求发起，延迟显示loading' : '请求结束，隐藏loading' }}</div>
   </div>
+  <t-loading :delay="1000" :loading="showLoading" text="加载中..." />
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const showLoading = ref(false);
-    const onChangeLoading = (value: boolean) => {
-      showLoading.value = value;
-    };
-
-    return {
-      showLoading,
-      onChangeLoading,
-    };
-  },
-});
+const showLoading = ref(false);
+const onChangeLoading = (value: boolean) => {
+  showLoading.value = value;
+};
 </script>
+
+<style scoped>
+.switch-wrap {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.7);
+  font-size: 14px;
+  .t-switch {
+    margin-right: 10px;
+  }
+}
+</style>

src/loading/demos/horz.vue

@@ -1,8 +1,12 @@
 <template>
-  <div>
-    <t-loading text="加载中..." />
-    <t-loading theme="spinner" text="加载中..." />
-  </div>
+  <t-loading text="加载中..." />
+  <t-loading theme="spinner" text="加载中..." />
 </template>
 
-<script lang="ts"></script>
+<script lang="ts" setup></script>
+
+<style scoped>
+.t-loading {
+  margin-right: 40px;
+}
+</style>

src/loading/demos/mobile.vue

@@ -1,57 +1,45 @@
 <template>
   <div class="tdesign-mobile-demo">
     <h1 class="title">Loading 加载中</h1>
-    <p class="summary">加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。</p>
-    <tdesign-demo-block title="01 类型" summary="纯图标">
+    <p class="summary">用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。</p>
+    <tdesign-demo-block title="01 类型" summary="纯icon">
       <div class="loading-demo first">
-        <baseVue />
+        <base-vue />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block summary="图标加文字横向">
-      <div class="loading-demo second">
-        <t-loading text="加载中..." />
-        <t-loading theme="spinner" text="加载中..." />
+    <tdesign-demo-block summary="icon加文字横向">
+      <div class="loading-demo">
+        <horz />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block summary="图标加文字竖向">
+    <tdesign-demo-block summary="icon加文字竖向">
       <div class="loading-demo">
-        <t-loading text="加载中" layout="vertical" />
+        <vert />
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block summary="纯文字">
-      <div class="loading-demo loading-demo--column">
-        <t-loading :indicator="false" text="加载中..." />
+      <div class="loading-demo">
+        <pure-text />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block summary="加载失败">
-      <div class="loading-demo loading-demo--column">
-        <t-loading :indicator="false">
-          <div class="custom-error">加载失败 <span>刷新</span></div>
-        </t-loading>
+    <tdesign-demo-block summary="进度条加载">
+      <div class="loading-demo">
+        <bar />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block summary="页面进度条加载">
-      <div class="loading-demo">
-        <t-loading theme="bar" :progress="progress" />
-        <t-button block variant="outline" @click.stop="onShowLoadingBar">{{
-          progress > 0 && progress < 1 ? '页面加载中...' : '页面进度条加载'
-        }}</t-button>
+    <tdesign-demo-block title="02 状态" summary="如果加载状态在延迟内结束，则不显示">
+      <div class="loading-demo loading-demo--column">
+        <delay />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block summary="延迟加载">
+    <tdesign-demo-block title="03 加载速度" summary="加载速度可配置，加载一周的时间单位（毫秒）">
       <div class="loading-demo loading-demo--column">
-        <div class="switch-wrap">
-          <t-switch @change="onChangeLoading"></t-switch>
-          <div>{{ showLoading ? '请求发起，延迟显示loading' : '请求结束，隐藏loading' }}</div>
-        </div>
-        <t-loading :delay="1000" :loading="showLoading" text="加载中..." />
+        <speed />
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 规格" summary="图标加文字横向">
+    <tdesign-demo-block title="04 规格" summary="支持自定义加载规格">
       <div class="loading-demo loading-demo--column">
-        <t-loading size="large" text="加载中（大）..." />
-        <t-loading size="medium" text="加载中（中）..." />
-        <t-loading size="small" text="加载中（小）..." />
+        <size />
       </div>
     </tdesign-demo-block>
   </div>
@@ -60,33 +48,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import baseVue from './base.vue';
-
-const progress = ref(0);
-let timer: any;
-
-const onShowLoadingBar = () => {
-  if (timer) {
-    return;
-  }
-  progress.value = 0;
-  timer = setInterval(() => {
-    if (progress.value >= 1) {
-      clearInterval(timer);
-      timer = null;
-
-      setTimeout(() => {
-        progress.value = 0;
-      }, 2000);
-      return;
-    }
-    progress.value += 0.01;
-  }, 100);
-};
-
-const showLoading = ref(false);
-const onChangeLoading = (value: boolean) => {
-  showLoading.value = value;
-};
+import horz from './horz.vue';
+import vert from './vert.vue';
+import pureText from './pure-text.vue';
+import delay from './delay.vue';
+import bar from './bar.vue';
+import speed from './speed.vue';
+import size from './size.vue';
 </script>
 
 <style scoped lang="less">
@@ -113,25 +81,5 @@ const onChangeLoading = (value: boolean) => {
       margin-left: 14px;
     }
   }
-
-  .switch-wrap {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    color: rgba(0, 0, 0, 0.7);
-    font-size: 14px;
-    .t-switch {
-      margin-right: 10px;
-    }
-  }
-
-  .custom-error {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.9);
-    span {
-      color: rgba(0, 82, 217, 1);
-      cursor: pointer;
-    }
-  }
 }
 </style>

src/loading/demos/pure-text.vue

@@ -1,11 +1,30 @@
 <template>
-  <div>
+  <div class="pure-text-demo">
     <t-loading :indicator="false" text="加载中..." />
     <t-loading theme="error" />
     <t-loading :indicator="false">
-      <div class="custom-error">加载失败 <span>刷新</span></div>
+      <div class="custom-error">
+        加载失败
+        <span>刷新</span>
+      </div>
     </t-loading>
   </div>
 </template>
 
-<script lang="ts"></script>
+<script lang="ts" setup></script>
+
+<style scoped lang="less">
+.pure-text-demo {
+  display: grid;
+  grid-gap: 40px;
+  grid-template-columns: repeat(3, auto);
+}
+.custom-error {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  > span {
+    color: rgba(0, 82, 217, 1);
+    cursor: pointer;
+  }
+}
+</style>

src/loading/demos/size.vue

@@ -1,9 +1,15 @@
 <template>
   <div>
-    <t-loading size="large" text="加载中（大）..." />
-    <t-loading size="medium" text="加载中（中）..." />
     <t-loading size="small" text="加载中（小）..." />
+    <t-loading size="medium" text="加载中（中）..." />
+    <t-loading size="large" text="加载中（大）..." />
   </div>
 </template>
 
-<script lang="ts"></script>
+<script lang="ts" setup></script>
+
+<style lang="less" scoped>
+.t-loading {
+  margin-bottom: 10px;
+}
+</style>

src/loading/demos/speed.vue

@@ -0,0 +1,22 @@
+<template>
+  <t-loading :duration="loadingDuration" text="加载中..." />
+  <div class="slider-wrap">
+    <span :style="{ width: '120px', 'margin-right': '10px' }"> 速度调整 </span>
+    <t-slider v-model="loadingDuration" show-extreme-value :min="0" :max="800" :label="false" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const loadingDuration = ref(300);
+</script>
+
+<style scoped>
+.slider-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: 20px;
+}
+</style>

src/loading/demos/vert.vue

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<script lang="ts"></script>
+<script lang="ts" setup></script>