@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/grid/loading/{grid-loading-off-tip-composition-api.vue → grid-custom-loading-composition-api.vue}

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="init">重试</tiny-button>
     <br /><br />
-    <tiny-grid :data="tableData">
+    <tiny-grid :data="tableData" :loading-component="loadingComponent()" :loading="loading">
       <tiny-grid-column type="index" width="5%"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
       <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
@@ -17,9 +17,7 @@ import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton }
 const tableData = ref([])
 const loading = ref(true)
 
-init()
-
-function init() {
+const init = () => {
   tableData.value = []
   loading.value = true
   setTimeout(() => {
@@ -53,4 +51,31 @@ function init() {
     loading.value = false
   }, 2000)
 }
+
+init()
+
+const loadingComponent = () => (
+  <div class="custom-loading">
+    <span>正在加载中。。。</span>
+  </div>
+)
 </script>
+
+<style scoped>
+.custom-loading {
+  position: absolute;
+  font-size: 20px;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+.custom-loading[visible='false'] {
+  display: none;
+}
+</style>

package/demos/pc/app/grid/loading/grid-custom-loading.spec.js

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义表格加载', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-loading#loading-grid-custom-loading')
+  await expect(page.getByText('正在加载中。。。')).toBeVisible()
+})

package/demos/pc/app/grid/loading/{grid-loading-off-tip.vue → grid-custom-loading.vue}

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="init">重试</tiny-button>
     <br /><br />
-    <tiny-grid :data="tableData">
+    <tiny-grid :data="tableData" :loading-component="loadingComponent()" :loading="loading">
       <tiny-grid-column type="index" width="5%"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
       <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
@@ -29,6 +29,13 @@ export default {
     this.init()
   },
   methods: {
+    loadingComponent() {
+      return (
+        <div class="custom-loading">
+          <span>正在加载中。。。</span>
+        </div>
+      )
+    },
     init() {
       this.tableData = []
       this.loading = true
@@ -66,3 +73,22 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.custom-loading {
+  position: absolute;
+  font-size: 20px;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+.custom-loading[visible='false'] {
+  display: none;
+}
+</style>

package/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue

@@ -20,6 +20,10 @@ const toolbarButtons = ref([
   {
     code: 'clearRadioRowData',
     name: '手动取消单选行'
+  },
+  {
+    code: 'setRadioRow',
+    name: '手动选中某一行'
   }
 ])
 const tableData = ref([
@@ -66,7 +70,7 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
-const gridRef = ref()
+const gridRef = ref('gridRef')
 
 function toolbarButtonClickEvent({ code }) {
   switch (code) {

package/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue

@@ -20,6 +20,22 @@ const toolbarButtons = ref([
   {
     code: 'clearSelection',
     name: '手动取消多选行'
+  },
+  {
+    code: 'setAllSelection',
+    name: '手动选中所有行'
+  },
+  {
+    code: 'setSelection',
+    name: '手动选中指定行'
+  },
+  {
+    code: 'toggleAllSelection',
+    name: '手动切换所有行选中状态'
+  },
+  {
+    code: 'toggleRowSelection',
+    name: '手动切换指定行选中状态'
   }
 ])
 const tableData = ref([
@@ -73,6 +89,22 @@ function toolbarButtonClickEvent({ code, $grid }) {
       $grid.clearSelection()
       break
     }
+    case 'setAllSelection': {
+      $grid.setAllSelection(true)
+      break
+    }
+    case 'setSelection': {
+      $grid.setSelection(tableData.value[4], true)
+      break
+    }
+    case 'toggleAllSelection': {
+      $grid.toggleAllSelection()
+      break
+    }
+    case 'toggleRowSelection': {
+      $grid.toggleRowSelection(tableData.value[1])
+      break
+    }
   }
 }
 </script>

package/demos/pc/app/grid/size/grid-size-composition-api.vue

@@ -1,4 +1,5 @@
 <template>
+  <p>medium</p>
   <tiny-grid :data="tableData" size="medium">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
@@ -6,6 +7,22 @@
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市"></tiny-grid-column>
   </tiny-grid>
+  <p>small</p>
+  <tiny-grid :data="tableData" size="small">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
+  <p>mini</p>
+  <tiny-grid :data="tableData" size="mini">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
 </template>
 
 <script setup lang="jsx">

package/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -25,13 +25,15 @@ const tableData = ref([
     name: 'GFD科技YX公司',
     area: '华东区',
     address: '福州',
+    employees: 423,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWWW科技YX公司',
     area: '华南区',
     address: '深圳福田区',
+    employees: 363,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
@@ -39,13 +41,15 @@ const tableData = ref([
     name: 'RFV有限责任公司',
     area: '华南区',
     address: '中山市',
+    employees: 131,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
-    area: '华东区',
-    address: '龙岩',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    employees: 215,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
@@ -53,13 +57,15 @@ const tableData = ref([
     name: 'YHN科技YX公司',
     area: '华南区',
     address: '韶关',
+    employees: 322,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
-    area: '华中区',
-    address: '黄冈',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    employees: 168,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])

package/demos/pc/app/grid/sort/combinations-sort-composition-api.vue

@@ -35,7 +35,7 @@ const tableData = ref([
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'BWW科技YX公司',
     city: '深圳',
     employees: 300,
     createdDate: '2016-07-08 12:36:22'
@@ -58,7 +58,7 @@ const tableData = ref([
     id: '5',
     name: 'YHN科技YX公司',
     city: '韶关',
-    employees: 810,
+    employees: 800,
     createdDate: '2012-12-12 12:12:12'
   },
   {
@@ -77,7 +77,7 @@ const tableData = ref([
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: 'SZ网络技术YX公司',
     city: '厦门',
     employees: 540,
     createdDate: '2016-06-03 13:53:25'

package/demos/pc/app/grid/sort/combinations-sort.spec.js

@@ -4,5 +4,8 @@ test('多字段组合排序', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-sort#sort-combinations-sort')
   await page.getByRole('cell', { name: '员工数(员工数和名称组合排序)' }).getByRole('img').click()
+  // 员工数第一优先级排序
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('1300')
+  // 公司名称第二优先级排序
+  await expect(page.locator('.tiny-grid-body__row').nth(1)).toContainText('YHN科技YX公司')
 })

package/demos/pc/app/grid/sort/combinations-sort.vue

@@ -41,7 +41,7 @@ export default {
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'BWW科技YX公司',
           city: '深圳',
           employees: 300,
           createdDate: '2016-07-08 12:36:22'
@@ -64,7 +64,7 @@ export default {
           id: '5',
           name: 'YHN科技YX公司',
           city: '韶关',
-          employees: 810,
+          employees: 800,
           createdDate: '2012-12-12 12:12:12'
         },
         {
@@ -83,7 +83,7 @@ export default {
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: 'SZ网络技术YX公司',
           city: '厦门',
           employees: 540,
           createdDate: '2016-06-03 13:53:25'

package/demos/pc/app/grid/toolbar/insert-remove-rows-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid ref="insertGridRef" :data="tableData">
+    <tiny-grid ref="insertGrid" :data="tableData">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>

package/demos/pc/app/grid/toolbar/insert-remove-rows.vue

@@ -7,7 +7,7 @@
       <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
       <tiny-grid-column title="操作" width="100">
-        <template v-slot="data">
+        <template #default="data">
           <div style="text-align: left; font-size: 16px">
             <icon-plus class="tiny-svg-size" @click="$refs.insertGrid.insertAt(record, data.row)"></icon-plus
             >&nbsp;&nbsp;

package/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <tiny-button @click="reLoad">刷新</tiny-button>
+    <tiny-grid ref="grid" :fetch-data="fetchData" :pager="pagerConfig" :loading="loading">
+      <template #toolbar>
+        <tiny-grid-toolbar refresh></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Pager, Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+
+const loading = ref(true)
+
+const grid = ref('grid')
+
+const pagerConfig = {
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 5,
+    pageSizes: [5, 10],
+    total: 0,
+    layout: 'total, prev, pager, next, jumper, sizes'
+  }
+}
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const getData = ({ page }) => {
+  let curPage = page.currentPage
+  let pageSize = page.pageSize
+  let offset = (curPage - 1) * pageSize
+  loading.value = true
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        result: tableData.value.slice(offset, offset + pageSize),
+        page: { total: tableData.value.length }
+      })
+      loading.value = false
+    }, 1000)
+  })
+}
+const fetchData = {
+  api: getData
+}
+
+const reLoad = () => {
+  grid.value.handleFetch('reload')
+}
+</script>

package/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue

@@ -124,15 +124,15 @@ const tableData = ref([
     ]
   }
 ])
-const gridRef = ref()
+const grid = ref('grid')
 
 const setTreeExpansion = () => {
-  gridRef.value.setTreeExpansion([this.tableData[1], this.tableData[3]], true)
+  grid.value.setTreeExpansion([tableData.value[1], tableData.value[3]], true)
 }
 const setAllTreeExpansion = () => {
-  gridRef.value.setAllTreeExpansion(true)
+  grid.value.setAllTreeExpansion(true)
 }
 const toggleTreeExpansion = () => {
-  gridRef.value.toggleTreeExpansion(this.tableData[1])
+  grid.value.toggleTreeExpansion(tableData.value[1])
 }
 </script>

package/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import {
   Grid as TinyGrid,
@@ -57,7 +57,11 @@ const validRules = {
 const toolbarButtons = ref([
   {
     code: 'save',
-    name: '保存'
+    name: '提交数据'
+  },
+  {
+    code: 'savePromise',
+    name: '保存（Promise）'
   }
 ])
 const tableData = ref([
@@ -166,6 +170,19 @@ function toolbarButtonClickEvent({ code }) {
       })
       break
     }
+    case 'savePromise': {
+      basicGridRef.value
+        .validate()
+        .then(() => {
+          TinyModal.alert('校验成功，触发了then！')
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.log(error)
+          TinyModal.alert('校验不通过，触发了catch')
+        })
+      break
+    }
   }
 }
 </script>

package/demos/pc/app/grid/validation/before-submit-validation.spec.js

@@ -10,7 +10,10 @@ test('提交前校验', async ({ page }) => {
     })
     .getByRole('textbox')
     .fill('')
-  await page.getByRole('button', { name: '保存' }).click()
-
+  await page.getByRole('button', { name: '提交数据' }).click()
   await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()
+
+  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '保存（Promise）' }).click()
+  await expect(page.getByText('校验不通过，触发了catch', { exact: true })).toBeVisible()
 })

package/demos/pc/app/grid/validation/before-submit-validation.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn, GridToolbar, Modal as TinyModal } from '@opentiny/vue'
 
 export default {
@@ -59,7 +59,11 @@ export default {
       toolbarButtons: [
         {
           code: 'save',
-          name: '保存'
+          name: '提交数据'
+        },
+        {
+          code: 'savePromise',
+          name: '保存（Promise）'
         }
       ],
       tableData: [
@@ -169,6 +173,19 @@ export default {
           })
           break
         }
+        case 'savePromise': {
+          this.$refs.basicGrid
+            .validate()
+            .then(() => {
+              TinyModal.alert('校验成功，触发了then！')
+            })
+            .catch((error) => {
+              // eslint-disable-next-line no-console
+              console.log(error)
+              TinyModal.alert('校验不通过，触发了catch')
+            })
+          break
+        }
       }
     }
   }

package/demos/pc/app/grid/webdoc/grid-loading.js

@@ -3,19 +3,23 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'loading-grid-loading-off-tip',
-      'name': { 'zh-CN': '关闭加载中状态', 'en-US': 'Disable loading status' },
+      'demoId': 'loading-grid-custom-loading',
+      'name': { 'zh-CN': '自定义表格加载', 'en-US': 'Disable loading status' },
       'desc': {
-        'zh-CN': '<p>表格属性设置 <code>loading</code> 开启或关闭加载状态，默认值为 <code>false</code> 不开启。</p>\n',
+        'zh-CN':
+          '<p>通过表格属性设置 <code>loading</code> 开启或关闭加载状态，默认值为 <code>false</code> 不开启。通过表格属性设置 <code>loadingComponent</code> 可以自定义表格加载中 <code>dom</code> 结构。</p>\n',
         'en-US':
           '<p>Table attribute setting <code>loading</code> Enables or disables loading. The default value is <code>false</code>. </p>\n'
       },
-      'codeFiles': ['loading/grid-loading-off-tip.vue']
+      'codeFiles': ['loading/grid-custom-loading.vue']
     },
     {
       'demoId': 'loading-grid-loading-tip',
       'name': { 'zh-CN': '开启加载中状态', 'en-US': 'Enable loading status' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过表格属性设置 <code>loading</code> 开启加载状态。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['loading/grid-loading-tip.vue']
     }
   ],

package/demos/pc/app/grid/webdoc/grid-size.js

@@ -65,9 +65,9 @@ export default {
       'name': { 'zh-CN': '开启响应式表格宽高', 'en-US': 'Enable responsive table width and height' },
       'desc': {
         'zh-CN':
-          '<p>表格属性设置 autoResize 属性开启响应式表格宽高的同时，将高度<code>heigh</code>设置为<code>auto</code>就可以自动跟随父容器高度。tips:在自动高度场景，请确保表格或其父容器被设置了一个固定的高度。</p>\n',
+          '<p>表格属性设置 autoResize 属性开启响应式表格宽高的同时，将高度<code>height</code>设置为<code>auto</code>就可以自动跟随父容器高度。tips:在自动高度场景，请确保表格或其父容器被设置了一个固定的高度。</p>\n',
         'en-US':
-          '<p>Table property setting autoResize property enabling responsive table width and height, set height <code>heigh</code> to <code>auto</code> to automatically follow the height of the parent container. </p>\n'
+          '<p>Table property setting autoResize property enabling responsive table width and height, set height <code>height</code> to <code>auto</code> to automatically follow the height of the parent container. </p>\n'
       },
       'codeFiles': ['size/auto-height.vue']
     },

package/demos/pc/app/grid/webdoc/grid-validation.js

@@ -65,7 +65,7 @@ export default {
       'name': { 'zh-CN': '提交前校验', 'en-US': 'Verify Before Submission' },
       'desc': {
         'zh-CN':
-          '<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n',
+          '<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。注意：如果传递了 callback 回调就不能正常 catch 到 validate 捕获到的错误。</p>\n',
         'en-US':
           'The <p>grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example. </p>\n'
       },

package/demos/pc/app/grid/webdoc/grid.js

@@ -369,7 +369,14 @@ export default {
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': { 'zh-CN': '表格是否显示加载中', 'en-US': 'Whether the table is being loaded.' },
-          'demoId': 'grid-loading#loading-grid-loading-off-tip'
+          'demoId': 'grid-loading#loading-grid-loading-tip'
+        },
+        {
+          'name': 'loading-component',
+          'type': 'VueComponent',
+          'defaultValue': '--',
+          'desc': { 'zh-CN': '自定义表格loading', 'en-US': 'Whether the table is being loaded.' },
+          'demoId': 'grid-loading#grid-custom-loading'
         },
         {
           'name': 'max-height',

package/demos/pc/app/guide/callback-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="demo-guide-callback">
-    <p>当前事件回调：{{ label }}</p>
+    <p>当前事件回调：{{ label }}{{ label ? '。' : '' }}</p>
     <tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
     <tiny-button plain class="e2">展示的回调</tiny-button>
     <tiny-button plain class="e3">隐藏前的回调</tiny-button>
-    <br>
+    <br />
     <tiny-button plain class="e4">隐藏的回调</tiny-button>
     <tiny-button plain class="e5">关闭的回调</tiny-button>
     <tiny-button plain class="e6">完成/销毁的回调</tiny-button>

package/demos/pc/app/guide/callback.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="demo-guide-callback">
-    <p>当前事件回调：{{ label }}</p>
+    <p>当前事件回调：{{ label }}{{ label ? '。' : '' }}</p>
     <tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
     <tiny-button plain class="e2">展示的回调</tiny-button>
     <tiny-button plain class="e3">隐藏前的回调</tiny-button>
-    <br>
+    <br />
     <tiny-button plain class="e4">隐藏的回调</tiny-button>
     <tiny-button plain class="e5">关闭的回调</tiny-button>
     <tiny-button plain class="e6">完成/销毁的回调</tiny-button>