fix: update docs of dialog-box (#1434)

examples/sites/demos/apis/dialog-box.js

@@ -216,7 +216,7 @@ export default {
         {
           name: 'top',
           type: 'string',
-          defaultValue: '15vh',
+          defaultValue: `'15vh'`,
           desc: {
             'zh-CN': '设置弹出框距离窗口顶部的高度',
             'en-US': 'Set the height of the popup from the top of the window'
@@ -238,7 +238,7 @@ export default {
         {
           name: 'width',
           type: 'string',
-          defaultValue: '500px',
+          defaultValue: `'500px'`,
           desc: {
             'zh-CN': '弹出框的宽度',
             'en-US': 'Wideness of the dialog box that is displayed'

examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
         <tiny-button @click="boxVisibility = false"> 取消 </tiny-button>

examples/sites/demos/pc/app/dialog-box/basic-usage.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
         <tiny-button @click="boxVisibility = false"> 取消 </tiny-button>

examples/sites/demos/pc/app/dialog-box/center-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/center.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/close-on-click-modal.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/close-on-press-escape.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <tiny-alert description="内容是Alert组件"></tiny-alert>
+      <tiny-alert description="内容是 Alert 组件"></tiny-alert>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <tiny-alert description="内容是Alert组件"></tiny-alert>
+      <tiny-alert description="内容是 Alert 组件"></tiny-alert>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue

@@ -2,9 +2,9 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
-        <div style="width: 100%; height: 100%; background: #dddddd">自定义footer区域</div>
+        <div style="width: 100%; height: 100%; background: #dddddd">自定义 footer 区域</div>
       </template>
     </tiny-dialog-box>
   </div>

examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue

@@ -3,9 +3,9 @@
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" width="30%">
       <template #title>
-        <div style="width: 80%; height: 100%; background: #dddddd">自定义title区域</div>
+        <div style="width: 80%; height: 100%; background: #dddddd">自定义 title 区域</div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue

@@ -3,9 +3,9 @@
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" width="30%">
       <template #title>
-        <div style="width: 80%; height: 100%; background: #dddddd">自定义title区域</div>
+        <div style="width: 80%; height: 100%; background: #dddddd">自定义 title 区域</div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/dialog-top-height-composition-api.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">显示在顶部</tiny-button>
     <tiny-button @click="boxVisibility2 = true">距离顶部 300px</tiny-button>
     <tiny-dialog-box top="0" v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box top="300px" v-model:visible="boxVisibility2" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/dialog-top-height.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">显示在顶部</tiny-button>
     <tiny-button @click="boxVisibility2 = true">距离顶部 300px</tiny-button>
     <tiny-dialog-box top="0" v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box top="300px" v-model:visible="boxVisibility2" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box v-model:visible="boxVisibility2" title="消息" width="60%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/dialog-width.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box v-model:visible="boxVisibility2" title="消息" width="60%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue

@@ -20,7 +20,7 @@
           <tiny-input v-model="input" clearable></tiny-input>
         </div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false"> 确 定 </tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/draggable.vue

@@ -20,7 +20,7 @@
           <tiny-input v-model="input" clearable></tiny-input>
         </div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false"> 确 定 </tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/open-close-events-composition-api.vue

@@ -10,7 +10,7 @@
       @opened="opened"
       @closed="closed"
     >
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

examples/sites/demos/pc/app/dialog-box/open-close-events.vue

@@ -10,7 +10,7 @@
       @opened="opened"
       @closed="closed"
     >
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>