做网站开发的笔记本配置,海报素材网站推荐,网站建设检查,c 做网站简单吗系列文章目录
第一章 定制上中下#xff08;顶部菜单、底部区域、中间主区域显示#xff09;三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-plus tabs组件构建选项卡功能 第五章…系列文章目录
第一章 定制上中下顶部菜单、底部区域、中间主区域显示三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-plus tabs组件构建选项卡功能 第五章 使用Vue3、Element-plus 构建组图文章 文章目录 系列文章目录[TOC](文章目录) 前言1、学习Element-plus 的Layout 布局1.1、Layout 布局1.2、基础布局1.3、分栏间隔1.4、混合布局1.5、Row 属性1.6、Col 属性 2、博物馆管理系统数据展示2.1、产品原型图2.2、准备mock数据2.3、通过axios加载数据 总结 前言
在第一章节我们把博物馆管理系统打了个地基基本的产品架构和框架已经都落实到位 第二章节使用Vue3、Element-plus菜单组件构建顶部区域的菜单包括父子菜单 第三章节使用Vue3、Element-plus走马灯组件构建轮播图 第四章节使用Vue3、Element-plus tabs组件构建选项卡功能 那么本章节我们使用Vue3、Element-plus构建组图文章 1、学习Element-plus 的Layout 布局
1.1、Layout 布局
通过基础的 24 分栏迅速简便地创建布局。
1.2、基础布局
使用单一分栏创建基础的栅格布局。 通过 row 和 col 组件并通过 col 组件的 span 属性我们就可以自由地组合布局。
templateel-rowel-col :span24div classgrid-content bg-purple-dark/div/el-col/el-rowel-rowel-col :span12div classgrid-content bg-purple/div/el-colel-col :span12div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span8div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple-light/div/el-colel-col :span8div classgrid-content bg-purple/div/el-col/el-rowel-rowel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-col/el-row
/template1.3、分栏间隔
分栏之间存在间隔。 Row 组件 提供 gutter 属性来指定每一栏之间的间隔默认间隔为 0。
templateel-row :gutter20el-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-col/el-row
/template1.4、混合布局
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
templateel-row :gutter20el-col :span16div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple/div/el-col/el-rowel-row :gutter20el-col :span8div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple/div/el-col/el-rowel-row :gutter20el-col :span4div classgrid-content bg-purple/div/el-colel-col :span16div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple/div/el-col/el-row
/template1.5、Row 属性
属性名说明类型可选值默认值gutter栅格间隔number—0type布局模式可选 flex现代浏览器下有效string——justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstartalignflex 布局下的垂直排列方式stringtop/middle/bottomtoptag自定义元素标签string*div
1.6、Col 属性
属性名说明类型可选值默认值span栅格占据的列数number—24offset栅格左侧的间隔格数number—0push栅格向右移动格数number—0pull栅格向左移动格数number—0xs768px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——sm≥768px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——md≥992px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——lg≥1200px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——xl≥1920px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——tag自定义元素标签string*div 2、博物馆管理系统数据展示
2.1、产品原型图 2.2、准备mock数据
mock数据是JSON格式的数据会使用axios去加载解析后放置到Layout 布局里去显示
2.3、通过axios加载数据 templatediv classmain-boxdiv classmain!-- 新闻动态 --div styletext-align: center;margin: 60px 2px 20px 2pxh1馆藏国宝/h1
!-- div stylemargin: 20px 0; color: #6a737dh3公司近期新闻动态行业热点资讯/h3/div--!-- 新闻动态 内容区域 --div classflex stylemargin: 20px 0; position: relative; el-row :gutter20el-col :span12 styleposition: relative; div stylewidth: 100%; position: relative; v-foritem in newList.slice(0,1)div classpic_item styleposition: relative; img :srcitem.picture stylewidth: 100%;height: 400px; alt//divdiv classpic_title_bottom{{item.title}}/div/div/el-colel-col :span6 styleposition: relative; div stylewidth: 100%; position: relative; v-foritem in newList.slice(1,3)div classpic_item styleposition: relative; img :srcitem.picture stylewidth: 100%;height: 200px; alt//divspan classpic_title_bottom stylez-index: 2{{item.title}}/span/div/el-colel-col :span6 styleposition: relative; div stylewidth: 100%; position: relative; v-foritem in newList.slice(3,5)div classpic_item styleposition: relative; img :srcitem.picture stylewidth: 100%;height: 200px; alt//divspan classpic_title_bottom{{item.title}}/span/div/el-col/el-row/divp stylemargin: 20px 0;router-link to/newsel-button typesuccess stylewidth: 250px; line-height: 50px; height: 50px; 查看更多 el-iconRight //el-icon/el-button/router-link/p/div!-- 新闻动态END --/div/div
/templatescriptimport 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 总结
效果可见页面中的【馆藏国宝】模块http://139.159.230.49/
以上就是今天要讲的内容本文介绍了在Vue3里如何使用Element-plus 的Layout 布局构建组图文章功能如何使用axios去加载Vue项目里的JSON格式文件数据填充到 Layout 布局里。
