1、概念
element+是一款用于制作頁面樣式，設計頁面結構的框架。相比于其他的幾個框架，這個框架設計的更為人性化，對企業(yè)級框架VUE的集成也很高。
1.1、設計原則
1.1.1、一致:
一致:
1.1.2、反饋：
1.1.3、效率：
1.1.4、可控：
1.2、頁面導航欄
1.2.1、頁面導航欄概念
導航可以解決用戶在訪問頁面時：在哪里，去哪里，怎樣去的問題。 一般導航會有「側欄導航」和「頂部導航」2 種類型。
類似于下圖所示：
如果針對較為復雜的網(wǎng)頁，Element+也提供了不同的類目的處理方式，如下圖所示的二級類目:
或者是更為復雜的三級類目等：
相信很多同學都見過這種類似的布局。那么這些布局在未來的前端學習中也是一個不可或缺的部分。
這些的編寫方法，我們稍后會講到。
2、安裝element+
2.1、環(huán)境支持
從之前一路學過來的同學們對這個肯定不會陌生，我們在學習一個新框架的時候一定離不開對環(huán)境的配置。我也相信現(xiàn)在應該沒有同學會用什么360、qq等瀏覽器去完成我們的代碼編寫了。
那么讓我們看看支持element+的瀏覽器。如果沒有該版本，請自行去下載最新版。這邊推薦使用google的Chrome來調(diào)試。
注意??！Element+不支持IE瀏覽器
2.2、使用vscode安裝element+
# NPM $ npm install element-plus --save
2.2.1、使用網(wǎng)絡環(huán)境引入element+（不推薦）
<head> <!-- Import style --> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> <!-- Import Vue 3 --> <script src="//unpkg.com/vue@3"></script> <!-- Import component library --> <script src="//unpkg.com/element-plus"></script> </head>
2.3、使用網(wǎng)頁引入的html版本的Element+案例（不推薦）
由于Element+和Vue的集成度很高，所以對于這個框架在Vue中的使用我們會在稍后的課程中講到。這節(jié)課我們首先嘗試一下最簡單的引入模式。至于為什么不推薦，等會在我們使用他的在線編譯的時候同學們就會明白老師為什么這么說了。
<!--使用html引入的helloworld程序--> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <script src="https://unpkg.com/vue@next"></script> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> <!-- import JavaScript --> <script src="https://unpkg.com/element-plus"></script> <title>Element Plus demo</title> </head> <body> <div id="app"> <el-button>{{ message }}</el-button> </div> <script> const App = { data() { return { message: "Hello Element Plus", }; }, }; // 可以使用，但是不推薦 // 這塊代碼的意思在后面接觸到vue的時候會有講解 const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
3、Element+實踐
3.1、Element+在vue中的引入（了解，后面vue學習中會用到）
在后期學習過vue以后，在main.ts文件中加入如下代碼來引入Element+
// main.ts import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app')
3.2、Element+的頁面布局
Element+官網(wǎng)：https://element-plus.org/zh-CN/component/button.html
在官網(wǎng)中找到如下內(nèi)容：
這個布局容器分為幾種：
<el-container>：外層容器。 當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列， 否則會水平左右排列。
<el-header>：頂欄容器。
<el-aside>：側邊欄容器。
<el-main>：主要區(qū)域容器。
<el-footer>：底欄容器。
如果覺得理解困難也沒關系，看看下圖：
如圖所示，這個布局的代碼如下：
<template> <div> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </div> </template>
通過這個布局，可以把你所有的樣式都放到指定的容器中。
也可以測一測試試：點擊element+中的小瓶子
可以打開playground。美中不足的是playground有一些bug，有可能會讓你代碼在編譯中卡住。所以推薦先在自己的本地vscode中完成編譯后在放入playground來測試頁面效果。
常用的布局推薦：
代碼如下：
<template> <div> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container> </div> </template>
點開playground以后效果如下：
3.3、頂部欄制作
我們先采用上面的這個布局，隨后點開菜單這個選項：
找到第一個頂欄的位置，點開源代碼：
這個源代碼很長，我們按照需求截取片段：
<template> <div> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header> <el-menu :default-active="activeIndex2" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" > <el-menu-item index="1">Processing Center</el-menu-item> <el-sub-menu index="2"> <template #title>Workspace</template> <el-menu-item index="2-1">item one</el-menu-item> <el-menu-item index="2-2">item two</el-menu-item> <el-menu-item index="2-3">item three</el-menu-item> <el-sub-menu index="2-4"> <template #title>item four</template> <el-menu-item index="2-4-1">item one</el-menu-item> <el-menu-item index="2-4-2">item two</el-menu-item> <el-menu-item index="2-4-3">item three</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="3" disabled>Info</el-menu-item> <el-menu-item index="4">Orders</el-menu-item> </el-menu> </el-header> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <script setup> import { ref } from 'vue' const activeIndex2 = ref('1') const handleSelect = (key: string, keyPath: string[]) => { console.log(key, keyPath) } </script>
在這個里面通過修改不同參數(shù)也可以里面內(nèi)容的樣式。
3.4、側邊欄制作
我們先找到側欄的模板，然后找到剛剛頁面布局的Aside部分：
<template> <div> <el-container> <el-aside width="200px"> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px"> <el-radio-button :label="false">expand</el-radio-button> <el-radio-button :label="true">collapse</el-radio-button> </el-radio-group> <el-menu default-active="2" :collapse="isCollapse" @open="handleOpen" @close="handleClose" > <el-sub-menu index="1"> <template #title> <el-icon><location /></el-icon> <span>Navigator One</span> </template> <el-menu-item-group> <template #title><span>Group One</span></template> <el-menu-item index="1-1">item one</el-menu-item> <el-menu-item index="1-2">item two</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group Two"> <el-menu-item index="1-3">item three</el-menu-item> </el-menu-item-group> <el-sub-menu index="1-4"> <template #title><span>item four</span></template> <el-menu-item index="1-4-1">item one</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="2"> <el-icon><icon-menu /></el-icon> <template #title>Navigator Two</template> </el-menu-item> <el-menu-item index="3" disabled> <el-icon><document /></el-icon> <template #title>Navigator Three</template> </el-menu-item> <el-menu-item index="4"> <el-icon><setting /></el-icon> <template #title>Navigator Four</template> </el-menu-item> </el-menu> </el-aside> <el-container> <el-header> <el-menu :default-active="activeIndex2" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" > <el-menu-item index="1">Processing Center</el-menu-item> <el-sub-menu index="2"> <template #title>Workspace</template> <el-menu-item index="2-1">item one</el-menu-item> <el-menu-item index="2-2">item two</el-menu-item> <el-menu-item index="2-3">item three</el-menu-item> <el-sub-menu index="2-4"> <template #title>item four</template> <el-menu-item index="2-4-1">item one</el-menu-item> <el-menu-item index="2-4-2">item two</el-menu-item> <el-menu-item index="2-4-3">item three</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="3" disabled>Info</el-menu-item> <el-menu-item index="4">Orders</el-menu-item> </el-menu> </el-header> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <script setup> import { ref } from 'vue' import { Document, Menu as IconMenu, Location, Setting, } from '@element-plus/icons-vue' const isCollapse = ref(true) const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath) } const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath) } const activeIndex2 = ref('1') const handleSelect = (key: string, keyPath: string[]) => { console.log(key, keyPath) } </script> <style> .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style>
覺得這個不好看沒關系，后面我們會對這個頁面進行一個自主DIY。首先我們先修改如下參數(shù)讓他們的顏色統(tǒng)一：
active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
3.4.1、側邊欄優(yōu)化
有些同學可能覺得這個按鍵不好看，希望修改一下其中的樣式。
這邊先展示一些代碼，后面在完成vue的學習以后在來讓大家完成對這塊的改編。（使用v-if來判斷目前狀態(tài)展示按鈕）
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px"> <el-radio-button :label="false" v-if="isCollapse" ><el-icon><fold /></el-icon> </el-radio-button> <el-radio-button :label="true" v-if="!isCollapse" ><el-icon><expand /></el-icon ></el-radio-button> </el-radio-group>
上面代碼需要在底下script中引入如下內(nèi)容：
Fold, Expand,
3.5、主體內(nèi)容增加：
Element+有兩種模式，一種是你去做一個只有頂部導航欄和側面導航欄的框體，其他內(nèi)容通過vue直接渲染到主體。另一種是直接自己在主體中編寫內(nèi)容。
由于我們現(xiàn)在沒接觸過vue，所以我們先來嘗試一下使用原生的代碼實現(xiàn)一個主體頁面編寫。
我們先找到按鈕這個位置：
找到我們喜歡的樣式
注：下面那種帶圖標的按鈕可能需要引入額外的Element-icon
我們先試試如下按鈕：
<el-button type="warning">Warning</el-button>
把他放入我們的主體，也就是main里面：
<el-main> <el-button type="warning" >Warning</el-button> </el-main>
那么這個時候呢，有些同學可能想問，如果我不想要這個樣式怎么辦呢？
讓我們來試一個東西：
<el-main> <el-button type="warning" style="width:300px">Warning</el-button> </el-main>
好！神奇的事情發(fā)生了，我們驚奇的發(fā)現(xiàn)按鈕的樣式發(fā)生了改變。也就是說這個框架是支持我們之前使用過的css引入模式的。
注：雖然可以使用css樣式，但是禁止使用js的函數(shù)，功能。由于新版Element+集成的是TypeScript，所以使用JS會爆發(fā)沖突。后續(xù)注冊事件可以使用vue方法來實現(xiàn)。
3.6、Element+總結
除了完成課堂案例以外，我給大家在布置一個額外的作業(yè)。
4、作業(yè)：
使用Element+的骨架，幻燈片，走馬燈功能實現(xiàn)如下頁面布局：
詳細布局模板如下：
作業(yè)答案在課件中有。
注：
如果出現(xiàn)如下報錯：
直接把這條剪切掉：
重新粘貼回去，即顯示正常。
該文章在 2024/4/3 12:15:54 編輯過
400 186 1886
