父組件與子組件的 Layout 佈局 - daniel-qa/Vue GitHub Wiki

父組件與子組件的 Layout 佈局

  • height: 100%; 目前佔空間的100%; 繼承至父組件，沒有父組件沒有設定明確高度的話，會有錯誤

  • height: 100vh; 视口高度的 100%;

如果你希望子组件 .container 占据整个宽度，可以明确设置宽度为 100% 或 100vw（视口宽度）。

考虑到你使用的是 flex 布局，可以使用 flex-grow 或 flex-basis 来调整布局，确保子组件的宽度能够适应父容器的宽度。

  • flex-grow 控制元素如何分配剩余空间。

  • flex-basis 控制元素的初始大小。

如果容器有足够的空间，flex-grow: 1 会使所有子元素均匀地分配剩余的空间。

簡單範例

父組件，儘量不要作太多複雜的設定，留給每個子組件，自己設定

  • 父組件
<template>
    <el-container>
        <el-header style="color: white;width:100%;">
            <h1> New Message </h1>
        </el-header>
        <div v-if="active === 0">
            <New_Msg_Type :active="active" @update-active="updateActive" />
        </div>
        <div v-if="active === 1">
            <New_Msg_BatchSelect active="active" @update-active="updateActive" />
        </div>
    </el-container>
</template>

<script setup>
    import { ref } from 'vue'; // 引入 ref 函數
    import New_Msg_Type from './new_msg_type.vue'; // 引入组件
    import New_Msg_BatchSelect from './new_msg_BatchSelect.vue'; // 引入组件
    import { ChatDotSquare } from '@element-plus/icons-vue'

    // 定义 active 变量并设定初始值
    const active = ref(0);

    // 更新 active 的方法
    const updateActive = (newActive) => {
        active.value = newActive;
    };
</script>
  • 子組件
<template>

    <el-container style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">

        <el-card style="width: 50%; margin-top: 20px;">
            <template #header>
                <span class="head-text">選擇發送類型</span>
            </template>

            <el-radio-group v-model="firstCardSelection" style="margin-top: 20px;">
                <el-radio label="option1">端外通知</el-radio>
                <el-radio label="option2">Email</el-radio>
                <el-radio label="option3">簡訊</el-radio>
            </el-radio-group>

        </el-card>

        <el-card style="width: 50%; margin-top: 20px;">
            <template #header>
                <span class="head-text">選擇挑選方式</span>
            </template>

            <el-radio-group v-model="secondCardSelection" style="margin-top: 20px;">
                <el-radio label="option1">端外通知</el-radio>
                <el-radio label="optionA">個別挑選</el-radio>
                <el-radio label="optionB">批量挑選</el-radio>
            </el-radio-group>

        </el-card>

        <el-button type="primary" @click="goNextStep" style="margin-top: 50px;">
            下一步
        </el-button>

    </el-container>


</template>

<script setup>
    import { ref } from 'vue'; // 引入 ref，創建響應式變量
    import { defineProps, defineEmits } from 'vue';

    // 創建響應式變量來管理選擇狀態
    const firstCardSelection = ref('option1');
    const secondCardSelection = ref('optionA');

    // 定义父组件传递过来的 props
    const props = defineProps({
        active: {
            type: Number,
            required: true
        }
    });
    // 定义触发事件的方式
    const emit = defineEmits();

    // 在按钮点击时，触发事件并传递新的 active 值
    const goNextStep = () => {
        emit('update-active', 1);  // 通知父组件更新 active 的值
    };

</script>

<style scoped>
    .head-text {
        display: block; /* 确保它是块级元素 */
        height: 60px; /* 设置高度 */
        line-height: 60px; /* 垂直居中文本 */
        font-size: 32px;
        font-weight: bold;
    }
    .radio-group {
        display: flex;
        justify-content: center; /* 水平居中 */
        margin-top: 50px; /* 与标题的距离 */
    }

    .nextbtn {
        width: 25%;
        margin-left: auto; /* 左邊距自動調整 */
        margin-top: 5%;
    }
    .radio-group .el-radio {
        margin-bottom: 50px; /* 给每个 radio 添加底部间距 */
    }

</style>
⚠️ **GitHub.com Fallback** ⚠️