版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
教學(xué)目標(biāo)掌握ElementPlus安裝與配置方法。熟知ElementPlus組件庫的組成與分類。學(xué)會(huì)使用Layout布局、Container布局容器來進(jìn)行頁面布局。學(xué)會(huì)使用配置組件進(jìn)行全局配置。學(xué)會(huì)使用Form表單組件來進(jìn)行表單設(shè)計(jì)。學(xué)會(huì)使用Table表格、VirtualizedTable虛擬化表格等Data數(shù)據(jù)展示組件。學(xué)會(huì)使用導(dǎo)航組件進(jìn)行頁面導(dǎo)航設(shè)計(jì)。1第10章Vue3UI框架ElementPlus（2學(xué)時(shí)）210.1ElementPlus概述
ElementPlus（v2.5.2）基于Vue3面向設(shè)計(jì)師和開發(fā)者的組件庫，主要為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理提供一套基于Vue3.X的桌面端組件庫。
詳細(xì)文檔可以參見官網(wǎng)：https://element-plus.gitee.io/zh-CN/。由于Vue3.x不再支持IE11(IE已經(jīng)宣告退市)，ElementPlus也不再支持IE瀏覽器（支持Edge瀏覽器）。
ElementUI是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue2.x的桌面端組件庫。10.1.1ElementPlus安裝與配置1.使用包管理器安裝
推薦使用npm的方式安裝，它能更好地和webpack打包工具配合使用。命令如下：npminstallelement-plus--save-dev|-Dnpminstallelement-plus--save#yarnyarnaddelement-plus#pnpm
-速度快、節(jié)省磁盤空間的軟件包管理器pnpminstallelement-plus310.1.1ElementPlus安裝與配置
2.CDN引用或本地引用
目前可以通過/element-plus獲取到最新版本的資源，在頁面上引入JS和CSS文件即可開始使用。<head><!--導(dǎo)入樣式--><linkrel="stylesheet"href="http:///element-plus/dist/index.css"/><!--導(dǎo)入Vue3--><scriptsrc="http:///vue@3"></script><!--導(dǎo)入組件庫--><scriptsrc="http:///element-plus"></script></head>【例10-1】ElementPlus初步應(yīng)用實(shí)戰(zhàn)—顯示“HelloWorld！”頁面。<!--
ep-10-1.html
-->
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Element
Plus顯示頁面</title>
<link
rel="stylesheet"
href="/element-plus/dist/index.css">
<script
src="https:///vue@3"></script>
<script
src="/element-plus"></script>
</head>
4<body>
<div
id="app">
<el-button
@click="display">{{
message
}}</el-button>
</div>
<script>
const
App
=
{
data()
{
return
{
message:
"Hello
Element
Plus",
};
},
methods:
{
display()
{
alert("Hello
World!");
}
},
};
const
app
=
Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
10.1.2ElementPlus導(dǎo)航
一般導(dǎo)航會(huì)有側(cè)欄導(dǎo)航和頂部導(dǎo)航2種類型。選擇合適的導(dǎo)航可以讓用戶在產(chǎn)品的使用過程中非常流暢，相反若是不合適就會(huì)引起用戶操作不適（方向不明確）。1.側(cè)欄導(dǎo)航
可將導(dǎo)航欄固定在左側(cè)，提高導(dǎo)航可見性，方便頁面之間切換。頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于中后臺(tái)的管理型、工具型網(wǎng)站。
一級(jí)類目-適用于結(jié)構(gòu)簡單的網(wǎng)站：只有一級(jí)頁面時(shí)。不需要使用面包屑，如下圖所示。10.1ElementPlus概述5
二級(jí)類目
側(cè)欄中最多可顯示兩級(jí)導(dǎo)航。當(dāng)使用二級(jí)導(dǎo)航時(shí)，建議搭配使用面包屑，方便用戶定位自己的位置和快速返回。頁面效果如下圖所示。10.1ElementPlus概述三級(jí)類目
適用于較復(fù)雜的工具型后臺(tái)。適用于較復(fù)雜的工具型后臺(tái)，左側(cè)欄為一級(jí)導(dǎo)航，中間欄可顯示其對(duì)應(yīng)的二級(jí)導(dǎo)航，也可放置其他的工具型選項(xiàng)。頁面效果如右圖所示。2.頂部導(dǎo)航
順應(yīng)了從上至下的正常瀏覽順序，方便瀏覽信息。頂部寬度限制了導(dǎo)航的數(shù)量和文本長度。適用于導(dǎo)航較少，頁面篇幅較長的網(wǎng)站。頁面效果如下圖所示。610.1.3ElementPlus快速開始
在項(xiàng)目中使用ElementPlus可以采用完整導(dǎo)入、按需導(dǎo)入及手動(dòng)導(dǎo)入等方式。
完整導(dǎo)入
如果不是很在乎打包后的文件大小，那么使用完整導(dǎo)入會(huì)更方便。代碼如下：//
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')
使用Volar需要在tsconfig.json中通過compilerOptions.type指定全局組件類型。代碼如下：//
tsconfig.json
{
"compilerOptions":
{
//
...
"types":
["element-plus/global"]
}
}
710.1.3ElementPlus快速開始按需導(dǎo)入
需要使用額外的插件來導(dǎo)入要使用的組件，推薦使用自動(dòng)導(dǎo)入。首先，需要安裝unplugin-vue-components和unplugin-auto-import這兩款插件。命令如下：npminstall-Dunplugin-vue-componentsunplugin-auto-import
然后把下列代碼插入到項(xiàng)目中的Vite或Webpack的配置文件中。代碼如下：（1）Vite//
vite.config.ts
import
{
defineConfig
}
from
'vite'
import
AutoImport
from
'unplugin-auto-import/vite'
import
Components
from
'unplugin-vue-components/vite'
import
{
ElementPlusResolver
}
from
'unplugin-vue-components/resolvers'
export
default
defineConfig({
//
...
plugins:
[
//
...
AutoImport({
resolvers:
[ElementPlusResolver()],
}),
Components({
resolvers:
[ElementPlusResolver()],
}),
],
})
（2）Webpack//
webpack.config.js
const
AutoImport
=
require('unplugin-auto-import/webpack')
const
Components
=
require('unplugin-vue-components/webpack')
const
{
ElementPlusResolver
}
=
require('unplugin-vue-components/resolvers')
module.exports
=
{
//
...
plugins:
[
AutoImport({
resolvers:
[ElementPlusResolver()],
}),
Components({
resolvers:
[ElementPlusResolver()],
}),
],
}
8手動(dòng)導(dǎo)入ElementPlus提供了基于ESModule開箱即用的TreeShaking功能。但是導(dǎo)入樣式時(shí)需要安裝unplugin-element-plus插件?？梢詤⒖脊俜骄W(wǎng)站了解如何配置它。
（1）App.vue<template>
<el-button>I
am
ElButton</el-button>
</template>
<script>
import
{
ElButton
}
from
'element-plus'
export
default
{
components:
{
ElButton
},
}
</script>
（2）vite.config.ts
//
vite.config.ts
import
{
defineConfig
}
from
'vite'
import
ElementPlus
from
'unplugin-element-plus/vite'
export
default
defineConfig({
//
...
plugins:
[ElementPlus()],
})
（3）VueCLI//
vue.config.js
module.exports
=
{
configureWebpack:
{
plugins:
[
require('unplugin-element-plus/webpack')({
//
options
}),
],
},
}
注意：如果使用
unplugin-element-plus，并且只使用組件API，需要手動(dòng)導(dǎo)入樣式。舉例如下：import'element-plus/es/components/message/style/css'import{ElMessage}from'element-plus'10.1.3ElementPlus快速開始910.1.4ElementPlus全局配置ElementPlus新增了一個(gè)全局配置管理的組件‘config-provider’，以替代ElementUI的全局配置‘Vtotype.$ELEMENT’。在引入ElementPlus時(shí)，可以傳入一個(gè)包含size和zIndex屬性的全局配置對(duì)象。size用于設(shè)置表單組件的默認(rèn)尺寸，zIndex用于設(shè)置彈出組件的層級(jí)，zIndex的默認(rèn)值為2000。完整引入import
{
createApp
}
from
'vue'
import
ElementPlus
from
'element-plus'
import
App
from
'./App.vue'
const
app
=
createApp(App)
app.use(ElementPlus,
{
size:
'small',
zIndex:
3000
})
按需引入<template>
<el-config-provider
:size="size"
:z-index="zIndex">
<app
/>
</el-config-provider>
</template>
<script>
import
{
defineComponent
}
from
'vue'
import
{
ElConfigProvider
}
from
'element-plus'
export
default
defineComponent({
components:
{
ElConfigProvider,
},
setup()
{
return
{
zIndex:
3000,
size:
'small',
}
},
})
</script>
10【例10-2】ElementPlus全局配置實(shí)戰(zhàn)-完整引入具體步驟如下：(1)創(chuàng)建項(xiàng)目。在命令行窗口中，執(zhí)行下列命令來創(chuàng)建項(xiàng)目ep-10-2。在對(duì)話界面中勾選Babel和Router，完成項(xiàng)目初步創(chuàng)建。vuecreateep-10-2(2)安裝ElementPlusnpminstallelement-plus–S(3)啟動(dòng)本地開發(fā)服務(wù)npmrunserve
(4)對(duì)項(xiàng)目src子文件夾下的main.js和views/HomeView.vue等文件進(jìn)行適應(yīng)性修改，完成ElementPlus導(dǎo)入、使用及應(yīng)用按鈕組件。修改main.js文件。import
{
createApp
}
from
'vue'
import
App
from
'./App.vue'
import
router
from
'./router'
//
全局引入
element-plus
import
ElementPlus
from
'element-plus'
import
'element-plus/dist/index.css'
//導(dǎo)入樣式createApp(App).use(ElementPlus).use(router).mount('#app')
//使用并掛載修改HomeView.vue文件<template>
<div
class="home">
<img
alt="Vue
logo"
src="../assets/logo.png">
<img
alt="Element
PLus
logo"
src="../assets/element-plus.jpg">
<div>
11<el-button
@click="addCount">Default</el-button>
<el-button
type="primary"
@click="addCount">Primary</el-button>
<el-button
type="success"
@click="addCount">Success</el-button>
<el-button
type="info"
@click="addCount">Info</el-button>
<el-button
type="warning"
@click="addCount">Warning</el-button>
<el-button
type="danger"
@click="addCount">Danger</el-button>
<el-button
@click="addCount">中文</el-button>
<p>count:{{count}}</p>
</div>
</div>
</template>
<script>
export
default
{
name:
'HomeView',
data(){
return{
count:0,
}
},
methods:{
addCount(){
this.count++
}
}
}
</script>
【例10-2】ElementPlus全局配置實(shí)戰(zhàn)-完整引入12【例10-3】ElementPlus全局配置實(shí)戰(zhàn)-局部引入
局部引入即在開發(fā)中用到某個(gè)組件對(duì)引入某個(gè)組件。main.js不需要修改，只需修改HomeView.vue文件。參考代碼如下：<template>
<div
class="home">
<img
alt="Vue
logo"
src="../assets/logo.png">
<img
alt="Element
PLus
logo"
src="../assets/element-plus.jpg">
<h3
align="center">局部引入Element
Plus</h3>
<div>
<el-button
round
@click="addCount">Default</el-button>
<el-button
type="primary"
round
@click="addCount">Primary</el-button>
<el-button
type="success"
round
@click="addCount">Success</el-button>
<el-button
type="info"
round
@click="addCount">Info</el-button>
<el-button
type="warning"
round
@click="addCount">Warning</el-button>
<el-button
type="danger"
round
@click="addCount">Danger</el-button>
<el-button
round
@click="addCount">中文</el-button>
<p>count:{{count}}</p>
</div>
</div>
</template>
<script>
import
{
defineComponent,ref
}
from
'vue'
import
{
ElButton
}
from
'element-plus'
import
'element-plus/theme-chalk/el-button.css'
import
'element-plus/theme-chalk/base.css'
export
default
defineComponent({
components:
{
ElButton
},
setup()
{
const
count=ref(0);
const
addCount=()=>{
count.value++
}
return
{
count,addCount
}
}
})
</script>
13【例10-4】ElementPlus全局配置實(shí)戰(zhàn)—按需引入
推薦按需自動(dòng)引入element-plus。需要安裝2個(gè)插件，分別為unplugin-vue-components和unplugin-auto-import。命令格式如下：npm
install
-D
unplugin-vue-components
unplugin-auto-import
安裝完成之后，需要在vue.config.js文件中進(jìn)行配置。//
vue.config.js
const
AutoImport
=
require('unplugin-auto-import/webpack')
const
Components
=
require('unplugin-vue-components/webpack')
const
{
ElementPlusResolver
}
=
require('unplugin-vue-components/resolvers')
module.exports
=
{
outputDir:
'./build',
//
和webpapck屬性完全一致，最后會(huì)進(jìn)行合并
configureWebpack:
{
resolve:
{
alias:
{
components:
'@/components'
}
},
//配置webpack自動(dòng)按需引入element-plus，
plugins:
[
AutoImport({
resolvers:
[ElementPlusResolver()]
}),
Components({
resolvers:
[ElementPlusResolver()]
})
]
}
}
按需自動(dòng)引入配置完之后，在組件中可直接使用，不需要引用和注冊(cè)。這里已經(jīng)實(shí)現(xiàn)了按需自動(dòng)移入Element-plus組件，組件中直接使用。14<template>
<div
class="home">
<img
alt="Vue
logo"
src="../assets/logo.png"
/>
<img
alt="Element
PLus
logo"
src="../assets/element-plus.jpg"
/>
<h3
align="center">按需自動(dòng)引入Element
Plus</h3>
<div>
<el-button
circle
@click="addCount">Default</el-button>
<el-button
type="primary"
circle
@click="addCount">Primary</el-button>
<el-button
type="success"
circle
@click="addCount">Success</el-button>
<el-button
type="info"
circle
@click="addCount">Info</el-button>
<el-button
type="warning"
circle
@click="addCount">Warning</el-button>
<el-button
type="danger"
circle
@click="addCount">Danger</el-button>
<el-button
circle
@click="addCount">中文</el-button>
<p>count:{{
count
}}</p>
</div>
</div>
</template>
<script>
import
{
defineComponent,
ref
}
from
"vue";
export
default
defineComponent({
setup()
{
const
count
=
ref(0);
const
addCount
=
()
=>
{
count.value++;
};
return
{
count,
addCount,
};
},
});
</script>
【例10-4】ElementPlus全局配置實(shí)戰(zhàn)—按需引入1510.2ElementPlus組件使用組件Demo快速體驗(yàn)交互細(xì)節(jié)；使用前端框架封裝的代碼幫助工程師快速開發(fā)。ElementPlus組件主要包括Basic基礎(chǔ)組件、配置組件、Form表單組件、Data數(shù)據(jù)展示、Navigation導(dǎo)航、Feedback反饋組件、Others其它等七大類。每一大類又包含很多組件。以下分別簡單介紹每一大類的組成元素。Basic基礎(chǔ)組件：Button按鈕、Border邊框、Color色彩、Container布局容器、Icon圖標(biāo)、Layout布局、Link鏈接、Scrollbar滾動(dòng)條、Space間距、Typography排版。配置組件：ConfigProvider全局配置。Form表單組件：Autocomplete自動(dòng)補(bǔ)全輸入框、Cascader級(jí)聯(lián)選擇器、Checkbox多選框、ColorPicker取色器、DatePicker日期選擇器、DateTimePicker日期時(shí)間選擇器、Form表單、Input輸入框、InputNumber數(shù)字輸入框、Radio單選框、Rate評(píng)分、Select選擇器、VirtualizedSelect虛擬化選擇器、Slider滑塊、Switch開關(guān)、TimePicker時(shí)間選擇器、TimeSelect時(shí)間選擇、Transfer穿梭框、Upload上傳。16Data數(shù)據(jù)展示：Avatar頭像、Badge徽章、Calendar日歷、Card卡片、Carousel走馬燈、Collapse折疊面板、Descriptions描述列表、Empty空狀態(tài)、Image圖片、InfiniteScroll無限滾動(dòng)、Pagination分頁、Progress進(jìn)度條、Result結(jié)果、Skeleton骨架屏、Table表格、VirtualizedTable虛擬化表格、Tag標(biāo)記、Timeline時(shí)間線、Tree樹形控件、TreeSelect樹形選擇、VirtualizedTree虛擬化樹形控件。Navigation：Affix固釘、Backtop回到頂部、Breadcrumb面包屑、Dropdown下拉菜單、Menu菜單、PageHeader頁頭、Steps步驟條、Tabs標(biāo)簽頁。Feedback反饋組件：Alert提示、Dialog對(duì)話框、Drawer抽屜、Loading加載、Message消息提示、MessageBox消息彈出框、Notification通知、Popconfirm氣泡確認(rèn)框、Popover彈出框、Tooltip文字提示。Others其他：Divider分割線。10.2ElementPlus組件17Scrollbar滾動(dòng)條（用于替換瀏覽器原生滾動(dòng)條）應(yīng)用。代碼如下，頁面效果如下圖所示。
具體步驟：使用vuecreateep-10-5創(chuàng)建帶Router和Babel特性的項(xiàng)目，在ep-10-5文件夾下安裝element-plus插件，修改main.js文件，插入導(dǎo)入element-plus和樣式文件，修改views/HomeView.vue文件，使用<el-scrollbar>組件（代碼中第7～13行），并在組件中插入1個(gè)包含若干p標(biāo)記的div標(biāo)記，用來顯示可以滾動(dòng)的帶數(shù)字的色塊。修改views/HomeView.vue文件<template>
<div
class="home">
<img
alt="Vue
logo"
src="../assets/logo.png"
/>
<img
alt="Element
PLus
logo"
src="../assets/element-plus.jpg"
/>
<h3>基礎(chǔ)組件--滾動(dòng)條應(yīng)用</h3>
<div>
【例10-5】ElementPlus的BASIC基礎(chǔ)組件實(shí)戰(zhàn)
<el-scrollbar>
<div
class="scrollbar-flex-content">
<p
v-for="item
in
20"
:key="item"
class="scrollbar-demo-item">
{{
item
}}
</p>
</div>
</el-scrollbar>
</div>
</div>
</template>
<style
scoped>
h3
{
text-align:
center;}
.scrollbar-flex-content
{
display:
flex;}
.scrollbar-demo-item
{
flex-shrink:
0;
display:
flex;
align-items:
center;
justify-content:
center;
width:
100px;
height:
50px;
margin:
10px;
text-align:
center;
border-radius:
4px;
background:
var(--el-color-danger-light-9);
color:
var(--el-color-danger);
}
.home
{
margin:
0px
auto;
width:
850px;
}
</style>
<script>
export
default
{
name:
"HomeView",
};
</script>
18修改main.js文件import
{
createApp
}
from
'vue'
import
App
from
'./App.vue'
import
router
from
'./router'
//
全局引入
element-plus
import
ElementPlus
from
'element-plus'
import
'element-plus/dist/index.css'
createApp(App).use(ElementPlus).use(router).mount('#app')
【例10-5】ElementPlus的BASIC基礎(chǔ)組件實(shí)戰(zhàn)1910.3ElementPlus組件應(yīng)用
10.3.1Basic基礎(chǔ)組件--Container布局容器1.布局容器組件簡介
Container布局容器用于布局的容器組件，方便快速搭建頁面的基本結(jié)構(gòu)。具體組件如下：<el-container>：外層容器。當(dāng)子元素中包含<el-header>或<el-footer>時(shí)，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列。布局容器組件及子元素屬性及說明如表10-1所示。<el-header>：頂欄容器。<el-aside>：側(cè)邊欄容器。<el-main>：主要區(qū)域容器。<el-footer>：底欄容器。
注意：以上組件采用了flex布局，使用前請(qǐng)確定目標(biāo)瀏覽器是否兼容。此外，<el-container>的直接子元素必須是后4個(gè)組件中的一個(gè)或多個(gè)。后4個(gè)組件的父元素必須是一個(gè)<el-container>。容器子元素參數(shù)（屬性）默認(rèn)值說明<el-container>directionhorizontal/vertical子元素中有el-header或el-footer時(shí)為vertical，否則為horizontal<el-header>height60px頂欄高度<el-aside>width300px側(cè)邊欄寬度，與<el-main>一起使用時(shí)均為水平排列<el-main>width
主要區(qū)域?qū)挾?，與<el-aside>一起使用時(shí)均為水平排列<el-footer>height60px底欄高度，與其它容器一起使用時(shí)為垂直排列202.常見頁面布局
在單頁應(yīng)用項(xiàng)目開發(fā)中，常常涉及到頁面布局的問題。采用ElementPlus的Container布局容器組件可以十分方便地實(shí)現(xiàn)各種類型的頁面布局。常用頁面布局可分為上下型、上中下型、左右型及左右和上下混合型布局，如下圖所示。上下型。10.3ElementPlus組件應(yīng)用2110.3ElementPlus組件應(yīng)用【例10-6】ElementPlus基礎(chǔ)組件--布局容器實(shí)戰(zhàn)。
使用vuecreateep-10-6創(chuàng)建項(xiàng)目ep-10-6,選擇Babel和Router特性創(chuàng)建項(xiàng)目，進(jìn)入項(xiàng)目文件夾安裝elemenet-plus插件，啟動(dòng)npmrunserve。在瀏覽器打開http://localhost:8080/。然后對(duì)main.js和views/HomeView.vue文件進(jìn)行適當(dāng)修改，完成布局容器組件的應(yīng)用。修改main.js文件import
{
createApp
}
from
"vue";
import
App
from
"./App.vue";
import
router
from
"./router";
//
全局引入
element-plus
import
ElementPlus
from
"element-plus";
import
"element-plus/dist/index.css";
createApp(App).use(ElementPlus).use(router).mount("#app");
22修改Views/HomeView.vue文件<template>
<div
class="home">
<img
alt="Vue
logo"
src="../assets/logo.png"
/>
<img
alt="Element
PLus
logo"
src="../assets/element-plus.jpg"
/>
<h3>布局容器的應(yīng)用</h3>
<div
class="common-layout">
<el-container
class="c1">
<el-header
class="h1">Header</el-header>
<el-container
class="c2">
<el-aside
class="a1"
width="200px">Aside</el-aside>
<el-container>
<el-header
class="a1h1">header</el-header>
<el-main
class="a1m1">Main</el-main>
<el-footer
class="a1f1">Footer</el-footer>
</el-container>
</el-container>
<el-footer
class="f1">Footer</el-footer>
</el-container>
</div>
</div>
</template>
<script>
export
default
{
name:
"HomeView",
};
</script>
<style>
.common-layout
{
margin:
0
auto;
width:
900px;
height:
420px;
border:
1px
dashed
#99aabb;
text-align:
center;
vertical-align:
middle;
}
.c1
{width:
100%;
height:
100%;
}
.h1
{
height:
60px;
background-color:
#f1f1f0;
}
.c2
{
height:
300px;
}
.a1
{
height:
300px;
background-color:
#f5f6fa;
}
.a1h1
{
height:
60px;
background-color:
#f2f0de;
}
.a1m1
{
height:
180px;
background-color:
#f7f8f0;
}
.a1f1
{
height:
60px;
background-color:
#f1f2c9;
}
.f1
{
height:
60px;
background:
#f1f5e9;
}
</style>
【例10-6】ElementPlus基礎(chǔ)組件--布局容器實(shí)戰(zhàn)2310.3.2Basic基礎(chǔ)組件--Layout布局
通過基礎(chǔ)的24分欄，迅速簡便地創(chuàng)建布局。注意：組件默認(rèn)使用Flex布局，不需要手動(dòng)設(shè)置type="flex"。需要注意父容器避免使用inline相關(guān)樣式，會(huì)導(dǎo)致組件寬度不能撐滿。1．基礎(chǔ)布局
使用列創(chuàng)建基礎(chǔ)網(wǎng)格布局。通過<el-row>和<el-col>組件，并通過<el-col>組件的span屬性來自由地組合布局。部分代碼如下，效果如圖10-14所示。<template>
<el-row>
<el-col
:span="24"><div
class="grid-content
bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col
:span="12"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="12"><div
class="grid-content
bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col
:span="8"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="8"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="8"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"></div></el-col>
24<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col
:span="4"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="4"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="4"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="4"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="4"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="4"><div
class="grid-content
bg-purple-light"></div></el-col>
</el-row>
</template>
10.3.2Basic基礎(chǔ)組件--Layout布局2．分欄間隔
支持列間距。<el-row>組件提供gutter屬性來指定列之間的間距，其默認(rèn)值為0。部分代碼如下，頁面效果如圖10-15所示。<template>
<el-row
:gutter="20">
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
</template>
253．混合布局
通過基礎(chǔ)的1/24分欄任意擴(kuò)展組合形成較為復(fù)雜的混合布局。代碼如下，頁面效果如圖10-16所示。
<el-col
:span="4"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="4"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row
:gutter="20">
<el-col
:span="4"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="16"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="4"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
</template>
<style>
.el-row
{
margin-bottom:
20px;
}
.el-row:last-child
{margin-bottom:
0;}
.el-col
{
border-radius:
4px;
}
.bg-purple-dark
{
background:
#99a9bf;
}
.bg-purple
{
background:
#d3dce6;
}
.bg-purple-light
{
background:
#e5e9f2;
}
.grid-content
{
border-radius:
4px;
min-height:
36px;
}
.row-bg
{
padding:
10px
0;
background-color:
#f9fafc;
}
</style>
<template>
<el-row
:gutter="20">
<el-col
:span="16"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="8"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row
:gutter="20">
<el-col
:span="8"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="8"><div
class="grid-content
bg-purple"></div></el-col>
10.3.2Basic基礎(chǔ)組件--Layout布局26
4.列偏移
可以指定列偏移量。通過設(shè)置<el-col>組件的offset屬性可以指定分欄偏移的欄數(shù)。代碼如下，頁面效果如圖10-17所示。<el-row
:gutter="20">
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"
:offset="6"
>
<div
class="grid-content
bg-purple"></div>
</el-col>
</el-row>
5．對(duì)齊方式
默認(rèn)使用flex布局來對(duì)分欄進(jìn)行靈活的對(duì)齊?？梢酝ㄟ^justify屬性來定義子元素的排版方式，其取值為start（左對(duì)齊，默認(rèn)）、center（居中對(duì)齊）、end（右對(duì)齊）、space-between（兩個(gè)相鄰子元素之間的間距相等）、space-around（容器中的每個(gè)子元素的每一側(cè)間距都是相等）或space-evenly（容器起始邊緣和第一個(gè)子元素之間的間距和每個(gè)相鄰子元素之間的間距相等）。代碼如下，頁面效果如圖10-18所示。10.3.2Basic基礎(chǔ)組件--Layout布局27<template>
<el-row
class="row-bg">
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row
class="row-bg"
justify="center">
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row
class="row-bg"
justify="end">
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row
class="row-bg"
justify="space-between">
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row
class="row-bg"
justify="space-around">
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"></div></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"></div></el-col>
</el-row>
<el-row
class="row-bg"
justify="space-evenly">
<el-col
:span="6"><div
class="grid-content
bg-purple"
/></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple-light"
/></el-col>
<el-col
:span="6"><div
class="grid-content
bg-purple"
/></el-col>
</el-row>
</template>
10.3.2Basic基礎(chǔ)組件--Layout布局2810.3.2Basic基礎(chǔ)組件--Layout布局
6．響應(yīng)式布局
參照了Bootstrap的響應(yīng)式設(shè)計(jì)，預(yù)設(shè)了五個(gè)響應(yīng)尺寸：xs、sm、md、lg和xl。代碼如下，頁面效果如圖10-19所示。<template>
<el-row
:gutter="10">
<el-col
:xs="8"
:sm="6"
:md="4"
:lg="3"
:xl="1"><div
class="grid-content
bg-purple"></div></el-col>
<el-col
:xs="4"
:sm="6"
:md="8"
:lg="9"
:xl="11">
<div
class="grid-content
bg-purple-light"></div>
</el-col>
<el-col
:xs="4"
:sm="6"
:md="8"
:lg="9"
:xl="11">
<div
class="grid-content
bg-purple"></div>
</el-col>
<el-col
:xs="8"
:sm="6"
:md="4"
:lg="3"
:xl="1">
<div
class="grid-content
bg-purple-light"></div>
</el-col>
</el-row>
</template>
7．RowAPI和Col組件APIRow組件和College組件屬性分別如表10-2和如表10-3所示。屬性說明類型默認(rèn)值gutter柵格間隔number0justifyflex布局下的水平排列方式enumstartalignflex布局下的垂直排列方式enumtoptag自定義元素標(biāo)簽stringdiv屬性說明類型默認(rèn)值span柵格占據(jù)的列數(shù)number24offset柵格左側(cè)的間隔格數(shù)number0push柵格向右移動(dòng)格數(shù)number0pull柵格向左移動(dòng)格數(shù)number0xs<768px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象number/object--sm≥768px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象number/object--md≥992px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象number/object--lg≥1200px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象number/object--xl≥1920px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象number/object--tag自定義元素標(biāo)記stringdiv29
8．Row插槽和Col插槽Row插槽和Col插槽名如表10-4所示。元素名稱描述子標(biāo)記Rowdefault自定義默認(rèn)內(nèi)容ColColdefault自定義默認(rèn)內(nèi)容
10.3.3配置組件--config-provider全局配置ConfigProvider被用來提供全局的配置選項(xiàng)，讓配置能夠在全局都能夠被訪問到。
1．i18n配置
通過ConfigProvider來配置多語言，讓所設(shè)計(jì)的應(yīng)用可以隨時(shí)切換語言。ConfigProvider屬性如表10-5所示，Button屬性與Message屬性如表10-6所示，ConfigProvider插槽說明如表10-7所示。使用locale和button兩個(gè)屬性來提供i18n相關(guān)配置。屬性說明類型默認(rèn)值locale 翻譯文本對(duì)象
objectensize全局組件大小enumdefaultzIndex 全局初始化zIndex的值number--namespace全局組件類名稱前綴(需要配合$namespace使用)stringelbutton 按鈕相關(guān)的配置詳細(xì)配置見下表object詳見下表message 消息相關(guān)配置，詳見下表object詳見下表experimental-features將要添加的實(shí)驗(yàn)階段的功能，所有功能都是默認(rèn)設(shè)置為falseobject--屬性參數(shù)描述類型默認(rèn)值buttonautoInsertSpace自動(dòng)在兩個(gè)中文字符之間插入空格booleanfalsemessagemax可同時(shí)顯示的消息最大數(shù)量number--10.3.2Basic基礎(chǔ)組件--Layout布局30<template>
<el-config-provider
:locale="locale">
<app
/>
</el-config-provider>
</template>
<script>
import
{
defineComponent
}
from
'vue'
import
{
ElConfigProvider
}
from
'element-plus'
import
zhCn
from
'element-plus/dist/locale/zh-cn.mjs'
export
default
defineComponent({
components:
{ElConfigProvider,
},
setup()
{
return
{
locale:
zhCn,
}
},
})
</script>
名稱描述Scopedefault自定義默認(rèn)內(nèi)容config:提供全局配置（從頂部繼承）10.3.2Basic基礎(chǔ)組件--Layout布局(1)全局配置ElementPlus提供了全局配置國際化的配置。如使用中文語言，代碼如下：import
ElementPlus
from
'element-plus'
import
zhCn
from
'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus,
{locale:
zhCn,
})
(2)ConfigProvider組件ElementPlus還提供了一個(gè)Vue組件ConfigProvider用于全局配置國際化的設(shè)置。單文件組件中引用格式如下：【例10-7】配置組件實(shí)戰(zhàn)。31
使用vuecreateep-10-7創(chuàng)建項(xiàng)目ep-10-7,步驟與【例10-6】相同。進(jìn)入項(xiàng)目文件夾安裝elemenet-plus插件，啟動(dòng)npmrunserve。在瀏覽器打開http://localhost:8080/。然后對(duì)main.js和views/HomeView.vue文件進(jìn)行適當(dāng)修改，完成布局容器組件的應(yīng)用?！纠?0-7】配置組件實(shí)戰(zhàn)。修改HomeView.vue文件<template>
<div>
<el-button
@click="toggle">Switch
Language</el-button>
<br
/>
<el-config-provider
:locale="locale">
<el-table
:data="list"
style="width:
100%">
<el-table-column
prop="id"
label="ID"
width="180"
/>
<el-table-column
prop="text"
label="TEXT"
width="580"
/>
</el-table>
<el-pagination
:total="100"
/>
</el-config-provider>
</div>
</template>
<script
setup>
import
{
computed,
ref,
reactive
}
from
"vue";
import
zhCn
from
"element-plus/dist/locale/zh-cn.mjs";
import
en
from
"element-plus/dist/locale/en.mjs";
const
list
=
reactive([
{
id:
1,
text:
"上午10：10開會(huì)"
},
{
id:
2,
text:
"下午去人社局取文件"
},
32
{
id:
3,
text:
"提交工作計(jì)劃"
},
{
id:
4,
text:
"去機(jī)械工程學(xué)院調(diào)研"
},
]);
const
language
=
ref("zh-cn");
const
locale
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年中國皮帶式電腦自動(dòng)重量分級(jí)機(jī)市場調(diào)查研究報(bào)告
- 2025年中國甲板設(shè)備市場調(diào)查研究報(bào)告
- 2025年中國環(huán)氧道路劃線漆市場調(diào)查研究報(bào)告
- 2025年中國汽車尾氣排放設(shè)備市場調(diào)查研究報(bào)告
- 2025年中國氟預(yù)混煉膠市場調(diào)查研究報(bào)告
- 2025年中國植絨雙層單（雙）人充氣床市場調(diào)查研究報(bào)告
- 2025年中國手機(jī)清洗潤滑劑市場調(diào)查研究報(bào)告
- 2025年中國固定資產(chǎn)管理系統(tǒng)市場調(diào)查研究報(bào)告
- 砌井合同范本
- 2025年中國單面防火線路板市場調(diào)查研究報(bào)告
- 2024版《公司法培訓(xùn)講義》
- 郵政儲(chǔ)蓄銀行-客戶經(jīng)理(個(gè)人消費(fèi)貸款)-試題+答案
- 2024年3月10日國考公務(wù)員稅務(wù)局面試真題及解析
- 旅店會(huì)客登記制度
- 市政造價(jià)員道路工程預(yù)決算入門講解(零起步培訓(xùn)課件)
- VOC廢氣治理工程中低溫催化氧化技術(shù)的研究與實(shí)踐
- 《管理統(tǒng)計(jì)學(xué)》課件
- 工程力學(xué)期末考試試卷A及答案
- 教師的挑戰(zhàn)：寧靜的課堂革命
- 新能源材料與器件導(dǎo)論緒論
- 市政工程監(jiān)理實(shí)施細(xì)則（完整版）
評(píng)論
0/150
提交評(píng)論