Vue3 的排版 - daniel-qa/Vue GitHub Wiki

Vue3 的排版

  • Vue 3 中實現頁面上下置中及 Element UI 的應用

在 Vue 3 的頁面上，將一個包含「按鈕」的元素垂直居中。利用 Element UI 的組件來實現這個效果。

1. 純 CSS 實現

2. 使用 Element UI 的 Layout 組件

Element UI 提供了 el-row 和 el-col 組件，可以方便地實現佈局。

<template>
  <el-row class="container">
    <el-col :span="24" :offset="0">
      <el-button>按鈕</el-button>
    </el-col>
  </el-row>
</template>

<style>
.container {
  height: 100vh;
}
</style>

el-row: 代表一行。

el-col: 代表一列，span 屬性表示佔用列數，offset 屬性表示向右偏移的列數。

3. 使用 Element UI 的 Dialog 組件（若需要模態框效果）

如果希望將按鈕放在一個模態框中，並讓模態框居中，可以使用 el-dialog 組件。

<template>
  <el-button @click="dialogVisible = true">打開對話框</el-button>

  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
  >
    <span>這是一個提示</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogVisible = f   
alse">確定</button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
}
</script>

Element UI 的 Dialog 組件本身就具有居中的特性，無需額外設置。

  • vh 是 CSS 中的一個長度單位，代表 viewport height 的縮寫，1vh 等於視窗高度的 1%。
  • 引用流程相關 #

所以整個 Vue3 的程式邏輯的流程就是：

在 src/main.js 內引用 App.vue ，然後渲染到 public/index.html 。

接下來直接打開 App.vue，先不要理會裡面的程式結構，一開始看一定看不懂，只要先了解每個 .vue 檔案都有主要的標籤，分成三個部分：

<template>
...
</template>

<script>
...
</script>

<style>
...
</style>
template：相關 html 標籤語法放置的地方

script：程式邏輯放置的地方

style：相關 css 標籤語法放置的地方

在 Vue3 的設計上，每一個網頁可以當作一個 .vue 檔案，而這一個 .vue 檔案要顯示的頁面內容，會放在 < template> < /template> 裡面，相關的程式邏輯語法會放在 < script></script > 裡面，最後如果有相關的 css 樣式，則放在 <style></style>。

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