fix: modify height props

opentiny · Nov 5, 2024 · ab8f874 · ab8f874
1 parent d00d67b
commit ab8f874
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 17 deletions.
diff --git a/examples/sites/demos/apis/drawer.js b/examples/sites/demos/apis/drawer.js
@@ -172,7 +172,7 @@ export default {
         {
           name: 'height',
           type: 'string',
-          defaultValue: "'500px'",
+          defaultValue: "'100vh'",
           desc: {
             'zh-CN': '设置抽屉的高度',
             'en-US': 'Set the height of the drawer'

diff --git a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -35,9 +36,3 @@ const drag = ({ width, height }) => {
   TinyModal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/drawer/dragable.vue b/examples/sites/demos/pc/app/drawer/dragable.vue
@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -44,9 +45,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
@@ -10,6 +10,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>

diff --git a/examples/sites/demos/pc/app/drawer/placement.vue b/examples/sites/demos/pc/app/drawer/placement.vue
@@ -9,6 +9,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>

diff --git a/packages/vue/src/drawer/src/index.ts b/packages/vue/src/drawer/src/index.ts
@@ -10,7 +10,7 @@ export const $constants = {
     return (scrollLockClasses[mode] || '') as string
   },
   DEFAULT_WIDTH: '500px',
-  DEFAULT_HEIGHT: '500px'
+  DEFAULT_HEIGHT: '100vh'
 }
 
 export const drawerProps = {

diff --git a/packages/vue/src/drawer/src/pc.vue b/packages/vue/src/drawer/src/pc.vue
@@ -31,7 +31,7 @@
         ]"
         :style="{
           width: ['left', 'right'].includes(placement) ? state.computedWidth : null,
-          height: ['top', 'bottom'].includes(placement) || dragable ? state.computedHeight : null,
+          height: ['top', 'bottom', 'left', 'right'].includes(placement) || dragable ? state.computedHeight : null,
           zIndex
         }"
         v-show="state.visible"