1、概念
element+是一款用于制作頁面樣式，設(shè)計(jì)頁面結(jié)構(gòu)的框架。相比于其他的幾個(gè)框架，這個(gè)框架設(shè)計(jì)的更為人性化，對(duì)企業(yè)級(jí)框架VUE的集成也很高。
1.1、設(shè)計(jì)原則
1.1.1、一致:
一致:
1.1.2、反饋：
1.1.3、效率：
簡(jiǎn)化流程： 設(shè)計(jì)簡(jiǎn)潔直觀的操作流程；
清晰明確： 語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；
幫助用戶識(shí)別： 界面簡(jiǎn)單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。
1.1.4、可控：
1.2、頁面導(dǎo)航欄
1.2.1、頁面導(dǎo)航欄概念
導(dǎo)航可以解決用戶在訪問頁面時(shí)：在哪里，去哪里，怎樣去的問題。 一般導(dǎo)航會(huì)有「?jìng)?cè)欄導(dǎo)航」和「頂部導(dǎo)航」2 種類型。
類似于下圖所示：
如果針對(duì)較為復(fù)雜的網(wǎng)頁，Element+也提供了不同的類目的處理方式，如下圖所示的二級(jí)類目:
或者是更為復(fù)雜的三級(jí)類目等：
相信很多同學(xué)都見過這種類似的布局。那么這些布局在未來的前端學(xué)習(xí)中也是一個(gè)不可或缺的部分。
這些的編寫方法，我們稍后會(huì)講到。
2、安裝element+
2.1、環(huán)境支持
從之前一路學(xué)過來的同學(xué)們對(duì)這個(gè)肯定不會(huì)陌生，我們?cè)趯W(xué)習(xí)一個(gè)新框架的時(shí)候一定離不開對(duì)環(huán)境的配置。我也相信現(xiàn)在應(yīng)該沒有同學(xué)會(huì)用什么360、qq等瀏覽器去完成我們的代碼編寫了。
那么讓我們看看支持element+的瀏覽器。如果沒有該版本，請(qǐng)自行去下載最新版。這邊推薦使用google的Chrome來調(diào)試。
注意?。lement+不支持IE瀏覽器
2.2、使用vscode安裝element+
# NPM $ npm install element-plus --save
2.2.1、使用網(wǎng)絡(luò)環(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的集成度很高，所以對(duì)于這個(gè)框架在Vue中的使用我們會(huì)在稍后的課程中講到。這節(jié)課我們首先嘗試一下最簡(jiǎn)單的引入模式。至于為什么不推薦，等會(huì)在我們使用他的在線編譯的時(shí)候同學(xué)們就會(huì)明白老師為什么這么說了。
<!--使用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的時(shí)候會(huì)有講解 const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
3、Element+實(shí)踐
3.1、Element+在vue中的引入（了解，后面vue學(xué)習(xí)中會(huì)用到）
在后期學(xué)習(xí)過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)容：
這個(gè)布局容器分為幾種：
<el-container>：外層容器。 當(dāng)子元素中包含 <el-header> 或 <el-footer> 時(shí)，全部子元素會(huì)垂直上下排列， 否則會(huì)水平左右排列。
<el-header>：頂欄容器。
<el-aside>：側(cè)邊欄容器。
<el-main>：主要區(qū)域容器。
<el-footer>：底欄容器。
如果覺得理解困難也沒關(guān)系，看看下圖：
如圖所示，這個(gè)布局的代碼如下：
<template> <div> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </div> </template>
通過這個(gè)布局，可以把你所有的樣式都放到指定的容器中。
也可以測(cè)一測(cè)試試：點(diǎn)擊element+中的小瓶子
可以打開playground。美中不足的是playground有一些bug，有可能會(huì)讓你代碼在編譯中卡住。所以推薦先在自己的本地vscode中完成編譯后在放入playground來測(cè)試頁面效果。
常用的布局推薦：
代碼如下：
<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>
點(diǎn)開playground以后效果如下：
3.3、頂部欄制作
我們先采用上面的這個(gè)布局，隨后點(diǎn)開菜單這個(gè)選項(xiàng)：
找到第一個(gè)頂欄的位置，點(diǎn)開源代碼：
這個(gè)源代碼很長(zhǎng)，我們按照需求截取片段：
<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>
在這個(gè)里面通過修改不同參數(shù)也可以里面內(nèi)容的樣式。
3.4、側(cè)邊欄制作
我們先找到側(cè)欄的模板，然后找到剛剛頁面布局的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>
覺得這個(gè)不好看沒關(guān)系，后面我們會(huì)對(duì)這個(gè)頁面進(jìn)行一個(gè)自主DIY。首先我們先修改如下參數(shù)讓他們的顏色統(tǒng)一：
active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
3.4.1、側(cè)邊欄優(yōu)化
有些同學(xué)可能覺得這個(gè)按鍵不好看，希望修改一下其中的樣式。
這邊先展示一些代碼，后面在完成vue的學(xué)習(xí)以后在來讓大家完成對(duì)這塊的改編。（使用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+有兩種模式，一種是你去做一個(gè)只有頂部導(dǎo)航欄和側(cè)面導(dǎo)航欄的框體，其他內(nèi)容通過vue直接渲染到主體。另一種是直接自己在主體中編寫內(nèi)容。
由于我們現(xiàn)在沒接觸過vue，所以我們先來嘗試一下使用原生的代碼實(shí)現(xiàn)一個(gè)主體頁面編寫。
我們先找到按鈕這個(gè)位置：
找到我們喜歡的樣式
注：下面那種帶圖標(biāo)的按鈕可能需要引入額外的Element-icon
我們先試試如下按鈕：
<el-button type="warning">Warning</el-button>
把他放入我們的主體，也就是main里面：
<el-main> <el-button type="warning" >Warning</el-button> </el-main>
那么這個(gè)時(shí)候呢，有些同學(xué)可能想問，如果我不想要這個(gè)樣式怎么辦呢？
讓我們來試一個(gè)東西：
<el-main> <el-button type="warning" style="width:300px">Warning</el-button> </el-main>
好！神奇的事情發(fā)生了，我們驚奇的發(fā)現(xiàn)按鈕的樣式發(fā)生了改變。也就是說這個(gè)框架是支持我們之前使用過的css引入模式的。
注：雖然可以使用css樣式，但是禁止使用js的函數(shù)，功能。由于新版Element+集成的是TypeScript，所以使用JS會(huì)爆發(fā)沖突。后續(xù)注冊(cè)事件可以使用vue方法來實(shí)現(xiàn)。
3.6、Element+總結(jié)
除了完成課堂案例以外，我給大家在布置一個(gè)額外的作業(yè)。
4、作業(yè)：
使用Element+的骨架，幻燈片，走馬燈功能實(shí)現(xiàn)如下頁面布局：
詳細(xì)布局模板如下：
作業(yè)答案在課件中有。
注：
如果出現(xiàn)如下報(bào)錯(cuò)：
直接把這條剪切掉：
重新粘貼回去，即顯示正常。
該文章在 2024/4/3 12:15:54 編輯過
400 186 1886
