系列文章目錄

第一章 定制上中下（頂部菜單、底部區(qū)域、中間主區(qū)域顯示）三層結(jié)構(gòu)首頁
第二章 使用Vue3、Element-plus菜單組件構(gòu)建菜單
第三章 使用Vue3、Element-plus走馬燈組件構(gòu)建輪播圖
第四章 使用Vue3、Element-plus tabs組件構(gòu)建選項卡功能
第五章 使用Vue3、Element-plus 構(gòu)建組圖文章

---

文章目錄

• 系列文章目錄
• • @[TOC](文章目錄)
• 前言
• 1、學(xué)習(xí)Element-plus 的Layout 布局
• • 1.1、Layout 布局
  • 1.2、基礎(chǔ)布局
  • 1.3、分欄間隔
  • 1.4、混合布局
  • 1.5、Row 屬性
  • 1.6、Col 屬性
• 2、博物館管理系統(tǒng)數(shù)據(jù)展示
• • 2.1、產(chǎn)品原型圖
  • 2.2、準備mock數(shù)據(jù)
  • 2.3、通過axios加載數(shù)據(jù)
• 總結(jié)

前言

在第一章節(jié)，我們把博物館管理系統(tǒng)打了個地基，基本的產(chǎn)品架構(gòu)和框架已經(jīng)都落實到位；
第二章節(jié)，使用Vue3、Element-plus菜單組件構(gòu)建頂部區(qū)域的菜單，包括父子菜單；
第三章節(jié)，使用Vue3、Element-plus走馬燈組件構(gòu)建輪播圖；
第四章節(jié)，使用Vue3、Element-plus tabs組件構(gòu)建選項卡功能；
那么本章節(jié)，我們使用Vue3、Element-plus構(gòu)建組圖文章；

---

1、學(xué)習(xí)Element-plus 的Layout 布局

1.1、Layout 布局

通過基礎(chǔ)的 24 分欄，迅速簡便地創(chuàng)建布局。

1.2、基礎(chǔ)布局

使用單一分欄創(chuàng)建基礎(chǔ)的柵格布局。
通過 row 和 col 組件，并通過 col 組件的 span 屬性我們就可以自由地組合布局。

<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><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>

1.3、分欄間隔

分欄之間存在間隔。

Row 組件 提供 gutter 屬性來指定每一欄之間的間隔，默認間隔為 0。

<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>

1.4、混合布局

通過基礎(chǔ)的 1/24 分欄任意擴展組合形成較為復(fù)雜的混合布局。

<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><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>

1.5、Row 屬性

屬性名	說明	類型	可選值	默認值
gutter	柵格間隔	number	—	0
type	布局模式，可選 flex，現(xiàn)代瀏覽器下有效	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex 布局下的垂直排列方式	string	top/middle/bottom	top
tag	自定義元素標簽	string	*	div

1.6、Col 屬性

屬性名	說明	類型	可選值	默認值
span	柵格占據(jù)的列數(shù)	number	—	24
offset	柵格左側(cè)的間隔格數(shù)	number	—	0
push	柵格向右移動格數(shù)	number	—	0
pull	柵格向左移動格數(shù)	number	—	0
xs	<768px 響應(yīng)式柵格數(shù)或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
sm	≥768px 響應(yīng)式柵格數(shù)或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
md	≥992px 響應(yīng)式柵格數(shù)或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
lg	≥1200px 響應(yīng)式柵格數(shù)或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
xl	≥1920px 響應(yīng)式柵格數(shù)或者柵格屬性對象	number/object (例如： {span: 4, offset: 4})	—	—
tag	自定義元素標簽	string	*	div

---

2、博物館管理系統(tǒng)數(shù)據(jù)展示

2.1、產(chǎn)品原型圖

2.2、準備mock數(shù)據(jù)

mock數(shù)據(jù)是JSON格式的數(shù)據(jù)，會使用axios去加載，解析后放置到Layout 布局里去顯示

2.3、通過axios加載數(shù)據(jù)

<template><div class="main-box"><div class="main"><!-- 新聞動態(tài)  --><div style="text-align: center;margin: 60px 2px 20px 2px"><h1>館藏國寶</h1>
<!--        <div style="margin: 20px 0; color: #6a737d"><h3>公司近期新聞動態(tài)，行業(yè)熱點資訊</h3></div>--><!-- 新聞動態(tài) 內(nèi)容區(qū)域 --><div class="flex" style="margin: 20px 0; position: relative; " ><el-row :gutter="20"><el-col :span="12" style="position: relative; "><div style="width: 100%; position: relative; " v-for="item in newList.slice(0,1)"><div class="pic_item" style="position: relative; "><img :src="item.picture" style="width: 100%;height: 400px;" alt=""/></div><div class="pic_title_bottom">{{item.title}}</div></div></el-col><el-col :span="6" style="position: relative; "><div style="width: 100%; position: relative;" v-for="item in newList.slice(1,3)"><div class="pic_item" style="position: relative; "><img :src="item.picture" style="width: 100%;height: 200px;" alt=""/></div><span class="pic_title_bottom" style="z-index: 2">{{item.title}}</span></div></el-col><el-col :span="6" style="position: relative; "><div style="width: 100%; position: relative; " v-for="item in newList.slice(3,5)"><div class="pic_item" style="position: relative; "><img :src="item.picture" style="width: 100%;height: 200px;" alt=""/></div><span class="pic_title_bottom">{{item.title}}</span></div></el-col></el-row></div><p style="margin: 20px 0;"><router-link to="/news"><el-button type="success" style="width: 250px; line-height: 50px; height: 50px; ">查看更多 <el-icon><Right /></el-icon></el-button></router-link></p></div><!-- 新聞動態(tài)END --></div></div>
</template><script>import axios from "axios";export default {name: 'VueHome',data() {return {carouseData : [],carouseProjectData: [],newList: "" , //新聞列表}},created() {//獲取新聞數(shù)據(jù)this.getData("newList"  ,  "../../static/mock/news/data.json");},methods: {getData(val , url){axios.get( url ).then((response) => {this[val] = response.data.success.data;});},}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "@/assets/css/index.css";.pic_item span.title {position: absolute;left: 2rem;top: 2rem;color: snow;font-size: 40px;
}.pic_title_bottom {position: absolute;color: snow;font-size: 18px;left: 1px;bottom: 7px;background: rgba(0,0,0,.5);line-height: 30px;text-align: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 98%;
}.pic_item span.subTitle {position: absolute;left: 2rem;top: 7rem;color: snow;font-size: 22px;
}.title {left: 2rem;top: 2rem;color: #2f2f2f;font-size: 40px;
}.subTitle {left: 2rem;top: 7rem;color: #2f2f2f;font-size: 16px;
}</style>

---

總結(jié)

效果可見頁面中的【館藏國寶】模塊：http://139.159.230.49/

以上就是今天要講的內(nèi)容，本文介紹了在Vue3里，如何使用Element-plus 的Layout 布局構(gòu)建組圖文章功能，如何使用axios去加載Vue項目里的JSON格式文件數(shù)據(jù)填充到 Layout 布局里。