Table of Contents of Series Articles
Chapter 1: Customize the top, middle and bottom (top menu, bottom area, middle main area display) three-layer structure homepage Chapter 2:
Use Vue3 and Element-plus menu components to build menus
Chapter 3: Use Vue3 and Element-plus revolving lantern components to build carousels Figure
Chapter 4 uses Vue3 and Element-plus tabs components to build tab functions.
Chapter 5 uses Vue3 and Element-plus to build group chart articles.
Preface
In the first chapter, we laid the foundation for the museum management system, and the basic product architecture and framework have been put in place; in the second
chapter, we used Vue3 and Element-plus menu components to build the menu in the top area, including parent-child menus;
Chapter 3 uses Vue3 and Element-plus revolving lantern components to build carousel charts;
Chapter 4 uses Vue3 and Element-plus tabs components to build tab functions;
then in this chapter, we use Vue3 and Element-plus to build group charts. article;
1. Learn the Layout of Element-plus
1.1. Layout layout
Create layouts quickly and easily with basic 24 columns.
1.2. Basic layout
Create a basic grid layout using a single column. 
Through the row and col components, and through the span attribute of the col component, we can freely combine the layout.
<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. Column interval
There are gaps between columns.
The Row component provides the gutter attribute to specify the interval between each column. The default interval is 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. Mixed layout
A more complex hybrid layout can be formed by arbitrarily expanding and combining the basic 1/24 columns.
<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 attribute
| attribute name | illustrate | type | Optional value | Defaults |
|---|---|---|---|---|
| gutter | Grid interval | number | — | 0 |
| type | Layout mode, optional flex, valid in modern browsers | string | — | — |
| justify | Horizontal arrangement under flex layout | string | start/end/center/space-around/space-between | start |
| align | Vertical arrangement under flex layout | string | top/middle/bottom | top |
| tag | Custom element tags | string | * | div |
1.6. Col attribute
| attribute name | illustrate | type | Optional value | Defaults |
|---|---|---|---|---|
| span | Number of columns occupied by the grid | number | — | 24 |
| offset | The number of intervals on the left side of the grid | number | — | 0 |
| push | Move the grid to the right by the number of cells | number | — | 0 |
| pull | Move the grid to the left by the number of cells | number | — | 0 |
| xs | <768px Responsive grid number or grid attribute object | number/object (for example: {span: 4, offset: 4}) | — | — |
| sm | ≥768px Responsive grid number or grid attribute object | number/object (for example: {span: 4, offset: 4}) | — | — |
| md | ≥992px responsive grid number or grid attribute object | number/object (for example: {span: 4, offset: 4}) | — | — |
| lg | ≥1200px responsive grid number or grid attribute object | number/object (for example: {span: 4, offset: 4}) | — | — |
| xl | ≥1920px responsive grid number or grid attribute object | number/object (for example: {span: 4, offset: 4}) | — | — |
| tag | Custom element tags | string | * | div |
2. Museum management system data display
2.1. Product prototype
2.2. Prepare mock data
Mock data is data in JSON format, which will be loaded using axios. After parsing, it will be placed in the Layout for display.
2.3. Load data through axios
<template>
<div class="main-box">
<div class="main">
<!-- 新闻动态 -->
<div style="text-align: center;margin: 60px 2px 20px 2px">
<h1>馆藏国宝</h1>
<!-- <div style="margin: 20px 0; color: #6a737d">
<h3>公司近期新闻动态，行业热点资讯</h3>
</div>-->
<!-- 新闻动态 内容区域 -->
<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>
<!-- 新闻动态END -->
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'VueHome',
data() {
return {
carouseData : [],
carouseProjectData: [],
newList: "" , //新闻列表
}
},
created() {
//获取新闻数据
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>
Summarize
The effect can be seen in the [Collection of National Treasures] module on the page: http://139.159.230.49/
The above is what I will talk about today. This article introduces how to use the Layout layout of Element-plus to build the group picture article function in Vue3, and how to use axios to load the JSON format file data in the Vue project and fill it into the Layout layout.