@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/detail-page/webdoc/detail-page.js

@@ -1,14 +1,25 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    deprecated: '3.12.0',
+    removed: '3.15.0'
+  },
   demos: [
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>在数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</p>\n',
-        'en-US':
-          '<p>You can set <code>hidden: true</code> in the data object to specify the data to be hidden by default. </p>\n'
+        'zh-CN': `<p>
+          <div>通过 <code> modelValue / v-model</code> 设置要显示的数据。</div>
+          <div>在每个数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</div>
+          <div>用户点击组件右上角的图标可以弹出个性化弹窗，弹窗里能选择是否隐藏指定数据。</div>
+        </p>`,
+        'en-US': `<p>
+          <div> Sets the data to be displayed with <code> modelValue/v-model</code>. </div>
+          <div> can set <code>hidden: true</code> in each data object to specify the default hidden data. </div>
+          <div> The user clicks the icon in the upper right corner of the component to pop up a personalized popup window, which can choose whether to hide the specified data. </div>
+        </p>`
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -28,10 +39,11 @@ export default {
     {
       'name': 'detail-page',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
-          'type': 'Array',
+          'type': 'IDetailPageItem[]',
+          'typeAnchorName': 'IDetailPageItem',
           'defaultValue': '',
           'desc': { 'zh-CN': '设置表头详情栏的数据', 'en-US': 'Set the data in the table header details column' },
           'demoId': ''
@@ -41,18 +53,18 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "详情栏标题;默认为 '带表头的详情栏'",
-            'en-US': 'Details column title; The default value is Detail Bar with Table Header.'
+            'zh-CN': `详情栏标, 默认为 '数据'`,
+            'en-US': `Details field, default value is' Data '`
           },
           'demoId': 'custom-show-text'
         },
         {
           'name': 'text-split',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': `'---'`,
           'desc': {
-            'zh-CN': "详情栏标题分隔符;默认为 ':'",
-            'en-US': "Details column title separator; The default value is ':'"
+            'zh-CN': `详情栏标题分隔符`,
+            'en-US': 'Details column title separator'
           },
           'demoId': 'custom-show-text'
         },
@@ -61,8 +73,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗标题;默认为 '个性化设置'",
-            'en-US': "Personalized pop-up window title; Default to'Personalization'"
+            'zh-CN': "个性化弹窗标题，默认为 '个性化标题'",
+            'en-US': "Personalize pop-up title, default is'Personalized title'"
           },
           'demoId': 'custom-show-text'
         },
@@ -71,8 +83,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '字段'",
-            'en-US': "Personalized pop-up window header text title bar field; The default value is'Field'"
+            'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '文本字段'",
+            'en-US': "Personalized pop-up window header text title bar field, The default value is 'Title'"
           },
           'demoId': 'custom-show-text'
         },
@@ -81,8 +93,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "提示不能全部隐藏的提示语;默认为 '至少显示一个'",
-            'en-US': "Prompt message that cannot be completely hidden; The default value is'At least one is displayed'"
+            'zh-CN': "提示不能全部隐藏的提示语，默认为 '不能全部隐藏'",
+            'en-US': "Prompt message that cannot be completely hidden, The default value is 'Cannot hide all' "
           },
           'demoId': 'custom-show-text'
         },
@@ -91,8 +103,9 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗表头文本操作栏字段;默认为 '隐藏'",
-            'en-US': "Personalized pop-up window header text operation column field; The default value is'hidden'"
+            'zh-CN': "个性化弹窗表头文本操作栏字段，默认为 '勾选隐藏'",
+            'en-US':
+              "Personalized pop-up window header text operation column field, The default value is'Click to hide'"
           },
           'demoId': 'custom-show-text'
         },
@@ -101,8 +114,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗确定按钮的文本;默认为 '确 定'",
-            'en-US': "Text of the confirmation button in the personalized pop-up window; The default value is'OK'"
+            'zh-CN': "个性化弹窗确定按钮的文本，默认为 '确定'",
+            'en-US': "Text of the confirmation button in the personalized pop-up window, The default value is'Confirm'"
           },
           'demoId': 'custom-show-text'
         },
@@ -111,8 +124,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗取消按钮的文本;默认为 '取 消'",
-            'en-US': "Text of the cancel button in the personalized pop-up window; The default value is'Cancel'"
+            'zh-CN': "个性化弹窗取消按钮的文本，默认为 '取消'",
+            'en-US': "Text of the cancel button in the personalized pop-up window, The default value is'Cancel'"
           },
           'demoId': 'custom-show-text'
         }
@@ -120,5 +133,16 @@ export default {
       'events': [],
       'slots': []
     }
+  ],
+  types: [
+    {
+      name: 'IDetailPageItem',
+      type: 'interface',
+      code: `interface IDetailPageItem {
+  label: string
+  value: string
+  hidden?: boolean
+}`
+    }
   ]
 }

package/demos/pc/app/dialog-box/basic-usage.spec.ts

@@ -4,49 +4,22 @@ test('dialogBox 基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#basic-usage')
 
-  const preview = page.locator('#preview')
-  const dialogBox = preview.locator('.tiny-dialog-box')
-  const mask = preview.locator('.tiny-dialog-box__wrapper')
-  const button = preview.getByRole('button', { name: '弹出Dialog' })
-  const header = dialogBox.locator('.tiny-dialog-box__header')
-  const body = dialogBox.locator('.tiny-dialog-box__body')
-  const footer = dialogBox.locator('.tiny-dialog-box__footer')
-  const close = header.getByRole('button', { name: 'Close' })
-  const confirm = footer.getByRole('button', { name: '确定' })
-  const cancel = footer.getByRole('button', { name: '取消' })
+  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
 
-  // 点击button，dialogBox弹出及显示正确
-  await button.click()
-  await expect(dialogBox).toBeVisible()
-  await expect(header).toBeVisible()
-  await expect(body).toBeVisible()
-  await expect(footer).toBeVisible()
+  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
 
-  // 点击关闭按钮，关闭dialogBox
-  await close.click()
-  await expect(dialogBox).not.toBeVisible()
-
-  // 点击确认按钮，关闭dialogBox
-  await button.click()
-  await expect(dialogBox).toBeVisible()
-  await confirm.click()
-  await expect(dialogBox).not.toBeVisible()
-
-  // 点击取消按钮，关闭dialogBox
-  await button.click()
-  await expect(dialogBox).toBeVisible()
-  await cancel.click()
-  await expect(dialogBox).not.toBeVisible()
+  // 点击 x 图标
+  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByLabel('Close').click()
 
   // 点击遮罩时，关闭dialogBox
-  await button.click()
-  await expect(dialogBox).toBeVisible()
-  await mask.click()
-  await expect(dialogBox).not.toBeVisible()
+  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.locator('.tiny-dialog-box__wrapper').click()
 
   // 按 ESC 键，关闭dialogBox
-  await button.click()
-  await expect(dialogBox).toBeVisible()
+  await page.getByRole('button', { name: '弹出Dialog' }).click()
   await page.locator('body').press('Escape')
-  await expect(dialogBox).not.toBeVisible()
+  expect(page.locator('.tiny-dialog-box.is-center > .tiny-dialog-box__header')).toBeHidden()
 })

package/demos/pc/app/dialog-box/center.spec.ts

@@ -3,19 +3,9 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 头部和底部水平居中', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#center')
-
-  const preview = page.locator('#preview')
-  const button = preview.getByRole('button', { name: '弹出Dialog' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-  const header = dialogBox.locator('.tiny-dialog-box__header')
-  const footer = dialogBox.locator('.tiny-dialog-box__footer')
-
-  // 头部水平居中
-  await expect(dialogBox).toHaveClass(/is-center/)
-  await button.click()
-  await expect(dialogBox).toBeVisible()
-  await expect(header).toHaveCSS('text-align', 'center')
-
+  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await page.getByText('消息').click()
   // 底部水平居中
-  await expect(footer).toHaveCSS('text-align', 'center')
+  await expect(page.locator('.tiny-dialog-box.is-center > .tiny-dialog-box__header')).toHaveCSS('text-align', 'center')
+  await page.getByRole('button', { name: '确 定' }).click()
 })

package/demos/pc/app/dialog-box/close-on-click-modal.spec.ts

@@ -3,13 +3,9 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 点击遮罩时不关闭弹窗', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#close-on-click-modal')
-
-  const preview = page.locator('#preview')
-  const button = preview.getByRole('button', { name: '弹出Dialog' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-  const mask = preview.locator('.tiny-dialog-box__wrapper')
-
-  await button.click()
+  const dialogBox = page.locator('.tiny-dialog-box')
+  const mask = page.locator('.tiny-dialog-box__wrapper')
+  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
   await expect(dialogBox).toBeVisible()
   await mask.click()
   await expect(dialogBox).toBeVisible()

package/demos/pc/app/dialog-box/close-on-press-escape.spec.ts

@@ -3,11 +3,8 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 禁用 ESC 关闭', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#close-on-press-escape')
-
-  const preview = page.locator('#preview')
-  const button = preview.getByRole('button', { name: '弹出Dialog' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-
+  const button = page.getByRole('button', { name: '弹出Dialog' })
+  const dialogBox = page.locator('.tiny-dialog-box')
   // dialogBox弹出后，禁用 ESC 关闭
   await button.click()
   await expect(dialogBox).toBeVisible()

package/demos/pc/app/dialog-box/custom-dialog-content.spec.ts

@@ -3,14 +3,12 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-content')
-
-  const preview = page.locator('#preview')
-  const button = preview.getByRole('button', { name: '弹出Dialog' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-  const body = dialogBox.locator('.tiny-dialog-box__body')
-
+  const button = page.getByRole('button', { name: '弹出Dialog' })
+  const dialogBox = page.locator('.tiny-dialog-box')
   await button.click()
   await expect(dialogBox).toBeVisible()
-  await expect(body.locator('span').filter({ hasText: /^dialog-box内容$/ })).toHaveCount(0)
-  await expect(body.locator('.tiny-alert--success')).toBeVisible()
+  await page.locator('#custom-dialog-content path').nth(2).click()
+  await page.waitForTimeout(300)
+  await page.getByRole('button', { name: '确 定' }).click()
+  await expect(dialogBox).toBeHidden()
 })

package/demos/pc/app/dialog-box/custom-dialog-footer.spec.ts

@@ -3,18 +3,7 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-footer')
-
-  const preview = page.locator('#preview')
-  const button = preview.getByRole('button', { name: '弹出Dialog' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-  const footer = dialogBox.locator('.tiny-dialog-box__footer')
-  const confirm = footer.getByRole('button', { name: '确定' })
-  const cancel = footer.getByRole('button', { name: '取消' })
-  const customFooter = footer.getByText('自定义footer区域')
-
-  await button.click()
-  await expect(dialogBox).toBeVisible()
-  await expect(confirm).toHaveCount(0)
-  await expect(cancel).toHaveCount(0)
-  await expect(customFooter).toBeVisible()
+  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText('自定义footer区域')
+  await page.getByLabel('Close').click()
 })

package/demos/pc/app/dialog-box/custom-dialog-title.spec.ts

@@ -3,16 +3,7 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-title')
-
-  const preview = page.locator('#preview')
-  const button = preview.getByRole('button', { name: '弹出Dialog' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-  const header = dialogBox.locator('.tiny-dialog-box__header')
-  const customTitle = header.getByText('自定义title区域')
-  const defaultTitle = header.getByText('消息')
-
-  await button.click()
-  await expect(dialogBox).toBeVisible()
-  await expect(defaultTitle).toHaveCount(0)
-  await expect(customTitle).toBeVisible()
+  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await expect(page.locator('.tiny-dialog-box__header > div')).toHaveText('自定义title区域')
+  await page.getByRole('button', { name: '确 定' }).click()
 })

package/demos/pc/app/dialog-box/destroy-on-close.spec.ts

@@ -2,13 +2,15 @@ import { test, expect } from '@playwright/test'
 
 test('关闭时销毁主体元素', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const dialogBox = page.locator('.tiny-dialog-box')
   await page.goto('dialog-box#destroy-on-close')
-
-  const dialogBox = page.locator('#preview .tiny-dialog-box')
-
-  await page.getByRole('radio', { name: '关闭时销毁' }).click()
-  await expect(dialogBox).toHaveCount(0)
-
+  await page.getByRole('button', { name: '打开弹框' }).click()
+  await page.getByLabel('Close').click()
   await page.getByRole('radio', { name: '关闭时不销毁' }).click()
-  await expect(dialogBox).toHaveCount(1)
+  await page.getByRole('button', { name: '打开弹框' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await page.getByRole('radio', { name: '关闭时销毁' }).click()
+  await page.getByRole('button', { name: '打开弹框' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(dialogBox).toBeHidden()
 })

package/demos/pc/app/dialog-box/dialog-top-height.spec.ts

@@ -3,20 +3,14 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 弹窗距离顶部的高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#dialog-top-height')
-
-  const preview = page.locator('#preview')
-  const defaultHeightBtn = preview.getByRole('button', { name: '显示在顶部' })
-  const customHeightBtn = preview.getByRole('button', { name: '距离顶部300px' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-
+  const dialogBox = page.locator('.tiny-dialog-box')
+  await page.getByRole('link', { name: '弹窗距离顶部的高度' }).click()
+  await page.getByRole('button', { name: '显示在顶部' }).click()
   // 默认弹窗距离顶部的高度
-  await defaultHeightBtn.click()
-  await expect(dialogBox.nth(0)).toBeVisible()
   await expect(dialogBox.nth(0)).toHaveCSS('top', '0px')
-  await page.locator('body').press('Escape')
-
+  await page.getByRole('button', { name: '确 定' }).click()
+  await page.getByRole('button', { name: '距离顶部300px' }).click()
   // 自定义弹窗距离顶部的高度
-  await customHeightBtn.click()
-  await expect(dialogBox.nth(1)).toBeVisible()
   await expect(dialogBox.nth(1)).toHaveCSS('top', '300px')
+  await page.getByRole('button', { name: 'Close' }).nth(1).click()
 })

package/demos/pc/app/dialog-box/dialog-width.spec.ts

@@ -4,21 +4,10 @@ test('dialogBox 弹窗的宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#dialog-width')
 
-  const preview = page.locator('#preview')
-  const weightBtn1 = preview.getByRole('button', { name: '宽度30%' })
-  const weightBtn2 = preview.getByRole('button', { name: '宽度60%' })
-  const dialogBox = preview.locator('.tiny-dialog-box')
-
-  // dialogBox 30% 的宽度
-  await weightBtn1.click()
-  await expect(dialogBox.nth(0)).toBeVisible()
-  const { width: width1 } = await dialogBox.nth(0).boundingBox()
-  expect(Math.round(width1)).toEqual(384)
-  await page.locator('body').press('Escape')
-
-  // dialogBox 60% 的宽度
-  await weightBtn2.click()
+  const dialogBox = page.locator('.tiny-dialog-box')
+  await page.getByRole('button', { name: '宽度30%' }).click()
+  await page.getByRole('button', { name: 'Close' }).click()
+  await page.getByRole('button', { name: '宽度60%' }).click()
   await expect(dialogBox.nth(1)).toBeVisible()
-  const { width: width2 } = await dialogBox.nth(1).boundingBox()
-  expect(Math.round(width2)).toEqual(768)
+  await page.getByRole('button', { name: '确 定' }).nth(1).click()
 })

package/demos/pc/app/dialog-box/draggable.spec.ts

@@ -4,10 +4,9 @@ test('dialogBox 可拖拽的弹窗', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#draggable')
 
-  const preview = page.locator('#preview')
-  const button = preview.getByRole('button', { name: '可拖拽弹窗' })
+  const button = page.getByRole('button', { name: '可拖拽弹窗' })
   const notify = page.locator('.tiny-notify')
-  const dialogBox = preview.locator('.tiny-dialog-box')
+  const dialogBox = page.locator('.tiny-dialog-box')
   const title = dialogBox.locator('.tiny-dialog-box__title')
 
   await button.click()
@@ -19,9 +18,9 @@ test('dialogBox 可拖拽的弹窗', async ({ page }) => {
   // 开始拖拽
   await page.mouse.move(x + 2, y + 2)
   await page.mouse.down()
-  await page.mouse.move(x + 300, y + 300)
-  await expect(notify.filter({ hasText: /^拖拽开始$/ })).toBeVisible()
+  await page.mouse.move(x + 100, y + 100)
   await expect(notify.filter({ hasText: /^拖拽移动$/ })).toBeVisible()
+  await expect(notify.filter({ hasText: /^拖拽开始$/ })).toBeVisible()
   await page.mouse.up()
   await expect(notify.filter({ hasText: /^拖拽结束$/ })).toBeVisible()
 })

package/demos/pc/app/dialog-box/form-in-dialog.spec.ts

@@ -3,13 +3,14 @@ import { test, expect } from '@playwright/test'
 test('弹窗表单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#form-in-dialog')
-
   const dialogBox = page.locator('.tiny-dialog-box')
   await page.getByRole('button', { name: '弹出表单' }).click()
   await expect(dialogBox.locator('.tiny-form')).toBeVisible()
-  await page.locator('#preview').getByRole('textbox').click()
-  await page.locator('#preview').getByRole('textbox').fill('name')
-  await page.getByText('消息').click()
+  await page.locator('#form-in-dialog').getByRole('textbox').click()
+  await page.locator('#form-in-dialog').getByRole('textbox').fill('123456')
   await page.locator('label').filter({ hasText: '全部' }).locator('span').nth(1).click()
+  await page.locator('label').filter({ hasText: '架构' }).locator('span').nth(1).click()
   await page.getByRole('button', { name: '确定' }).click()
+  await page.getByRole('button', { name: '弹出表单' }).click()
+  await expect(dialogBox.locator('.tiny-form')).toBeVisible()
 })

package/demos/pc/app/dialog-box/lock-scroll.spec.ts

@@ -5,16 +5,13 @@ test('弹出时禁用滚动', async ({ page }) => {
   await page.goto('dialog-box#lock-scroll')
 
   const dialogBox = page.locator('.tiny-dialog-box')
-  await page.getByRole('button', { name: '允许滚动背景' }).click()
-  await expect(page.locator('body')).not.toHaveClass(/dialog-box__scroll-lock/)
-
+  await page.getByRole('button', { name: '不允许滚动背景' }).click()
   // 检查页面元素是否随鼠标滑轮滚动而移动
-  const { y: initY } = await page.locator('#preview').boundingBox()
-  await page.mouse.wheel(0, 100)
-  await page.waitForTimeout(100)
-  const { y: afterY } = await page.locator('#preview').boundingBox()
-  expect(initY).toBeGreaterThan(afterY)
-
+  const { y: initY } = await page.locator('body').boundingBox()
+  await page.mouse.wheel(0, 200)
+  await page.waitForTimeout(200)
+  const { y: afterY } = await page.locator('body').boundingBox()
+  await expect(initY).toBeGreaterThanOrEqual(afterY)
   await page.getByRole('button', { name: '确 定' }).click()
-  await expect(dialogBox).not.toBeVisible()
+  await expect(dialogBox.locator('.tiny-form')).toBeHidden()
 })

package/demos/pc/app/dialog-box/open-close-events.spec.ts

@@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test'
 test('弹出与关闭事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#open-close-events')
-
   const dialogBox = page.locator('.tiny-dialog-box')
   await page.getByRole('button', { name: '弹出与关闭事件' }).click()
   await expect(page.getByText('窗口弹出')).toBeVisible()

package/demos/pc/app/dialog-box/right-dialog-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
-    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
       <template #title>
         <div class="header">
           <span class="title">标题区</span>

package/demos/pc/app/dialog-box/right-dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
-    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
+    <tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
       <template #title>
         <div class="header">
           <span class="title">标题区</span>