fix(dialog-box): [dialog-box] modify demo (#2472)

opentiny · Nov 2, 2024 · e92d2ad · e92d2ad
1 parent 6180ec7
commit e92d2ad
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 17 deletions.
diff --git a/examples/sites/demos/apis/dialog-box.js b/examples/sites/demos/apis/dialog-box.js
@@ -133,7 +133,7 @@ export default {
             'en-US': 'Achieve the maximum height of the window'
           },
           mode: ['pc'],
-          pcDemo: 'form-in-dialog'
+          pcDemo: 'dialog-width'
         },
         {
           name: 'modal',

diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue
@@ -1,9 +1,18 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
+    <tiny-button @click="boxVisibility1 = true" type="info">宽度30% 最大高度200px</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
-    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box 内容</span>
+    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%" max-height="200px">
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">产品</tiny-radio>
+        </tiny-radio-group>
+      </div>
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">研发</tiny-radio>
+        </tiny-radio-group>
+      </div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
@@ -19,7 +28,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyButton, TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 const boxVisibility1 = ref(false)
 const boxVisibility2 = ref(false)
@@ -29,4 +38,7 @@ const boxVisibility2 = ref(false)
 .mydialogBox {
   background: rgba(150, 137, 137, 0.8);
 }
+.demo-class {
+  height: 300px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts b/examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts
@@ -1,11 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('dialogBox 弹窗的宽度', async ({ page }) => {
+test('dialogBox 弹窗的宽度和最大高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#dialog-width')
 
   const dialogBox = page.locator('.tiny-dialog-box')
   await page.getByRole('button', { name: /30%/ }).click()
+  await expect(dialogBox.first()).toHaveCSS('max-height', '200px')
   await page.getByRole('button', { name: 'Close' }).click()
   await page.getByRole('button', { name: /60%/ }).click()
   await expect(dialogBox.nth(1)).toBeVisible()

diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width.vue b/examples/sites/demos/pc/app/dialog-box/dialog-width.vue
@@ -1,9 +1,18 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
+    <tiny-button @click="boxVisibility1 = true" type="info">宽度30% 最大高度200px</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
-    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box 内容</span>
+    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%" max-height="200px">
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">产品</tiny-radio>
+        </tiny-radio-group>
+      </div>
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">研发</tiny-radio>
+        </tiny-radio-group>
+      </div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
@@ -18,12 +27,14 @@
 </template>
 
 <script lang="jsx">
-import { TinyButton, TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
     TinyButton,
-    TinyDialogBox
+    TinyDialogBox,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -38,4 +49,7 @@ export default {
 .mydialogBox {
   background: rgba(150, 137, 137, 0.8);
 }
+.demo-class {
+  height: 300px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js b/examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js
@@ -111,12 +111,14 @@ export default {
     {
       demoId: 'dialog-width',
       name: {
-        'zh-CN': '弹窗的宽度',
-        'en-US': 'Wideness of the pop-up window'
+        'zh-CN': '弹窗的宽度和最大高度',
+        'en-US': 'The width and height of the pop-up window'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>width</code>属性设置指定弹窗的宽度。</p>\n',
-        'en-US': '<p>The<code>width</code>attribute specifies the width of the pop-up window. </p>\n'
+        'zh-CN':
+          '<p>可通过<code>width</code>属性设置指定弹窗的宽度，<code>max-height</code>属性设置窗口最大高度。</p>\n',
+        'en-US':
+          '<p>The<code>width</code>attribute specifies the width of the pop-up window,<code>max-height</code> Property Setting the maximum height of the window.</p>\n'
       },
       codeFiles: ['dialog-width.vue']
     },
@@ -243,9 +245,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>is-form-reset</code>属性设置<code>false</code>,关闭弹窗不重置数据，<code>resize</code>属性设置窗口最大化，<code>max-height</code>属性设置窗口最大高度。</p>',
+          '<p>可通过<code>is-form-reset</code>属性设置<code>false</code>,关闭弹窗不重置数据，<code>resize</code>属性设置窗口最大化。</p>',
         'en-US':
-          '<p>By setting the<code>is-form-reset</code>attribute to <code>false</code>, close the pop-up window without resetting the data,<code>resize</code> Property Setting Window Maximization,<code>max-height</code> Property Setting the maximum height of the window.</p>'
+          '<p>By setting the<code>is-form-reset</code>attribute to <code>false</code>, close the pop-up window without resetting the data,<code>resize</code> Property Setting Window Maximization.</p>'
       },
       codeFiles: ['form-in-dialog.vue']
     },