:::

12-1 配置版面

  1. 利用布局容器來配置版面(https://element-plus.gitee.io/#/zh-CN/component/container),例如(src\App.vue):
    <template>
      <div>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-container>
            <el-header><Header/></el-header>
            <el-main>
              <router-view></router-view>
            </el-main>
            <el-footer><Footer/></el-footer>
          </el-container>
        </el-container>
      </div>
    </template>

     

  2. 利用https://element-plus.gitee.io/#/zh-CN/component/menu來製作選單,例如(src\components\Header.vue):
    <script>
    import { ref } from "vue";
    export default {
      setup() {
        const activeIndex = ref(1);
    
        const handleSelect = (key, keyPath) => {
          console.log(key, keyPath);
        };
        return { activeIndex, handleSelect };
      },
    };
    </script>
    
    <template>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1">回首頁</el-menu-item>
        <el-submenu index="2">
          <template #title>各種功能</template>
          <el-menu-item index="2-1">選項1</el-menu-item>
          <el-menu-item index="2-2">選項2</el-menu-item>
          <el-menu-item index="2-3">選項3</el-menu-item>
          <el-submenu index="2-4">
            <template #title>選項4</template>
            <el-menu-item index="2-4-1">選項1</el-menu-item>
            <el-menu-item index="2-4-2">選項2</el-menu-item>
            <el-menu-item index="2-4-3">選項3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item
          index="3"
          disabled
        >消息中心</el-menu-item>
        <el-menu-item index="4"><a
            href="https://www.ele.me"
            target="_blank"
          >後臺管理</a></el-menu-item>
      </el-menu>
    </template>
    <style lang="scss" scoped>
    </style>
    

     

  3.  

:::

書籍目錄

展開 | 闔起

快速登入


https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1748%26tbsn%3D33

計數器

今天: 5078507850785078
昨天: 2489248924892489
總計: 8027060802706080270608027060802706080270608027060