最小的 el‐dialog - daniel-qa/Vue GitHub Wiki

最小的 el-dialog

利用 el-row，將所有元素併列成一行

利用 el-col 的 span ，進行欄寬控制

再把 dialog 中的 header,body，高度都調到最小( 保留1px ,因設0會有樣式錯誤的潛在問題)

<!--修改時間-彈框-->
<el-dialog v-model="dialogModifyTimeVisible" class="dialogModifyTimeStyle">

    <el-row justify="center" align="middle" style="height:50px; width:550px;">

            <el-col :span="6">
                修改預約發送時間
            </el-col>

            <el-col :span="11">
                <el-date-picker v-model="selectedDate"
                                type="datetime"
                                placeholder="選擇日期與時間"
                                format="YYYY-MM-DD HH:mm"
                                value-format="x"
                                :editable="false"
                                @change="updateMessage" />
            </el-col>

            <el-col :span="7">
                <el-button @click="dialogModifyTimeVisible = false">取消</el-button>
                <el-button type="primary" @click="saveSendTime(selectedDate)">确定</el-button>
            </el-col>

        </el-row>

</el-dialog>

<style>
    /* 全域生效，非 scoped */

    .dialogModifyTimeStyle {
        border-radius: 12px;
        background-color: #f9f9f9;
        height:150px; /* 不要強制固定高度，讓內容自適應 */ 
        width: 600px;
        padding-left:10px;
    }
        .dialogModifyTimeStyle .el-dialog__header {
            padding:0px;
            margin:0px;
            height: 1px; /* 不要強制固定高度，讓內容自適應 */            
        }

        .dialogModifyTimeStyle .el-dialog__body {
            padding: 0px;
            margin: 0px;
            height: 1px; /* 不要強制固定高度，讓內容自適應 */
        }
</style>

P.S

因每個 el-plus 元件，是預設資料佔用空間大小去設計，所以太小量的資料，會有留白太多的問題

所以儘量用符合設計概念上，相對應的 el-plus 元件，去做設計開發，比較不會有問題

像 el-row, el-row，就是設計用來作小範圍的資料顯示控制，所以適合拿來操作

el-plus 的元件都支援組合開發，可以在內部放入更細部控制的 el-plus 元件，以利 UI 介面開發。

⚠️ **GitHub.com Fallback** ⚠️