docs(site/loading): [loading] specification document (#1338)

examples/sites/demos/pc/app/loading/custom-class-composition-api.vue

@@ -8,7 +8,7 @@ import { Loading } from '@opentiny/vue'
 
 onMounted(() => {
   Loading.service({
-    text: '自定义loading类名',
+    text: '自定义 loading 类名',
     customClass: 'new-loading',
     target: document.getElementById('tiny-demo-loading-custom-class'),
     background: 'rgba(0, 0, 0, 0.7)'

examples/sites/demos/pc/app/loading/custom-class.vue

@@ -8,7 +8,7 @@ import { Loading } from '@opentiny/vue'
 export default {
   mounted() {
     Loading.service({
-      text: '自定义loading类名',
+      text: '自定义 loading 类名',
       customClass: 'new-loading',
       target: document.getElementById('tiny-demo-loading-custom-class'),
       background: 'rgba(0, 0, 0, 0.7)'

examples/sites/demos/pc/app/loading/fullscreen-composition-api.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <tiny-button @click="handleClick" v-loading.lock.fullscreen="fullscreenLoading">
-      指令方式加载全屏Loading
+      指令方式加载全屏 Loading
     </tiny-button>
-    <tiny-button @click="handleClick2">静态方法加载全屏Loading</tiny-button>
+    <tiny-button @click="handleClick2">静态方法加载全屏 Loading</tiny-button>
   </div>
 </template>
 
 <script setup>
-import { ref, getCurrentInstance } from 'vue'
+import { ref } from 'vue'
 import { Button as TinyButton, Loading } from '@opentiny/vue'
 
 const vLoading = Loading.directive
@@ -23,7 +23,7 @@ function handleClick() {
 }
 
 function handleClick2() {
-  const loading =  Loading.service({
+  const loading = Loading.service({
     lock: true,
     text: 'Loading',
     background: 'rgba(0, 0, 0, 0.8)'

examples/sites/demos/pc/app/loading/fullscreen.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('全局加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#fullscreen')
-  await page.getByRole('button', { name: '指令方式加载全屏Loading' }).click()
+  await page.getByRole('button', { name: '指令方式加载全屏 Loading' }).click()
   const vLoading = page.locator('.circular')
   await expect(vLoading).toBeVisible()
 
-  await page.getByRole('button', { name: '静态方法加载全屏Loading' }).click()
+  await page.getByRole('button', { name: '静态方法加载全屏 Loading' }).click()
   const sLoading = page.getByText('Loading', { exact: true })
   await expect(sLoading).toBeVisible()
 })

examples/sites/demos/pc/app/loading/fullscreen.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <tiny-button @click="handleClick" v-loading.lock.fullscreen="fullscreenLoading">
-      指令方式加载全屏Loading
+      指令方式加载全屏 Loading
     </tiny-button>
-    <tiny-button @click="handleClick2">静态方法加载全屏Loading</tiny-button>
+    <tiny-button @click="handleClick2">静态方法加载全屏 Loading</tiny-button>
   </div>
 </template>
 
@@ -30,7 +30,7 @@ export default {
       }, 2500)
     },
     handleClick2() {
-      const loading =  Loading.service({
+      const loading = Loading.service({
         lock: true,
         text: 'Loading',
         background: 'rgba(0, 0, 0, 0.8)'

examples/sites/demos/pc/app/loading/spinner-composition-api.vue

@@ -11,9 +11,9 @@ const spinnerIcon = iconLoadingShadow()
 
 onMounted(() => {
   Loading.service({
-    text: '自定义loading图标',
+    text: '自定义 loading 图标',
     spinner: spinnerIcon,
-    target: document.getElementById('tiny-demo-loading-spinner'),
+    target: document.getElementById('tiny-demo-loading-spinner')
   })
 })
 </script>
@@ -23,4 +23,4 @@ onMounted(() => {
   margin-bottom: 10px;
   height: 120px;
 }
-</style>
+</style>

examples/sites/demos/pc/app/loading/spinner.spec.ts

@@ -6,6 +6,6 @@ test('自定义加载图标', async ({ page }) => {
   const loadingText = page.locator('.tiny-loading__text')
 
   const svg = page.locator('#tiny-demo-loading-spinner .tiny-icon-loading')
-  await expect(loadingText).toContainText('自定义loading图标')
+  await expect(loadingText).toContainText('自定义 loading 图标')
   await expect(svg).toHaveClass(/tiny-icon-loading/)
 })

examples/sites/demos/pc/app/loading/spinner.vue

@@ -11,9 +11,9 @@ const spinnerIcon = iconLoadingShadow()
 export default {
   mounted() {
     Loading.service({
-      text: '自定义loading图标',
+      text: '自定义 loading 图标',
       spinner: spinnerIcon,
-      target: document.getElementById('tiny-demo-loading-spinner'),
+      target: document.getElementById('tiny-demo-loading-spinner')
     })
   }
 }

examples/sites/demos/pc/app/loading/webdoc/loading.js

@@ -16,7 +16,8 @@ export default {
       'demoId': 'size',
       'name': { 'zh-CN': '尺寸', 'en-US': 'Customized loading prompt text' },
       'desc': {
-        'zh-CN': '<p>可通过 size 属性设置尺寸大小，可选值：medium / small / mini。</p>\n',
+        'zh-CN':
+          '<p>可通过 <code>size</code> 属性设置尺寸大小，可选值：<code>medium</code> / <code>small</code> / <code>mini </code>。</p>\n',
         'en-US': '<p>Customize the prompt text of the loaded text through <code>text</code>. </p>\n'
       },
       'codeFiles': ['size.vue']
@@ -52,9 +53,8 @@ export default {
       'demoId': 'directive',
       'name': { 'zh-CN': '指令', 'en-US': 'Directive' },
       'desc': {
-        'zh-CN': '详细用法参考如下示例',
+        'zh-CN': '<p>通过v-loading使用指令。</p>',
-        'en-US':
+        'en-US': `<p>Use instructions via v-loading</p>`
-          '<p>The <code>v-loading.lock.fullscreen</code> command mode or service mode is used for global loading. To use the command mode for global loading, perform the following operations: \n Add <code>Vue.use(Loading)</code>\n in the <code>Vue 2</code> environment and <code>app.use(Loading)</code></p>\n in the <code>Vue 3</code> environment'
       },
       'codeFiles': ['directive.vue']
     },
@@ -176,6 +176,7 @@ export default {
         {
           'name': 'v-loading',
           'type': 'boolean',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '是否显示加载动画',
             'en-US': 'Whether to display loading animation'
@@ -185,6 +186,7 @@ export default {
         {
           'name': 'tiny-loading__text',
           'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '显示在加载图标下方的加载文案',
             'en-US': 'The load copy displayed below the load icon'
@@ -194,6 +196,7 @@ export default {
         {
           'name': 'tiny-loading__background',
           'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '遮罩背景色',
             'en-US': 'Mask background color'
@@ -203,6 +206,7 @@ export default {
         {
           'name': 'tiny-loading__custom-class',
           'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': 'Loading 的自定义类名',
             'en-US': 'Custom class name for Loading'
@@ -212,6 +216,7 @@ export default {
         {
           'name': 'fullscreen',
           'type': 'boolean',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '命令修饰符：是否显示全屏',
             'en-US': 'Command modifier: Whether to display full screen'
@@ -221,6 +226,7 @@ export default {
         {
           'name': 'body',
           'type': 'boolean',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '命令修饰符：遮罩层是否在body上',
             'en-US': 'Command modifier: Whether the mask is on the body'
@@ -229,6 +235,7 @@ export default {
         {
           'name': 'lock',
           'type': 'boolean',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '命令修饰符：全屏时是否锁定滚动',
             'en-US': 'Command modifier: Whether to lock scroll in full screen'