fix: (layout) height property in header and footer now is responsive

any-design · Feb 28, 2024 · 76f8e87 · 76f8e87
1 parent 5703db0
commit 76f8e87
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/packages/layout/components/AFooter.vue b/src/packages/layout/components/AFooter.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
   props: {
@@ -16,10 +16,10 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const height = typeof props.height === 'number' ? `${props.height}px` : props.height;
-    const styles = {
-      height: height || '',
-    };
+    const height = computed(() => typeof props.height === 'number' ? `${props.height}px` : props.height);
+    const styles = computed(() => ({
+      height: height.value || '',
+    }));
     return {
       styles,
     };

diff --git a/src/packages/layout/components/AHeader.vue b/src/packages/layout/components/AHeader.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
   props: {
@@ -16,10 +16,10 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const height = typeof props.height === 'number' ? `${props.height}px` : props.height;
-    const styles = {
-      height: height || '',
-    };
+    const height = computed(() => typeof props.height === 'number' ? `${props.height}px` : props.height);
+    const styles = computed(() => ({
+      height: height.value || '',
+    }));
     return {
       styles,
     };