程序员经验分享-hwhale

[Vue3 博物馆管理系统] 使用Vue3、Element-plus的Layout 布局构建组图文章

2023-11-10

系列文章目录

第一章 定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页
第二章 使用Vue3、Element-plus菜单组件构建菜单
第三章 使用Vue3、Element-plus走马灯组件构建轮播图
第四章 使用Vue3、Element-plus tabs组件构建选项卡功能
第五章 使用Vue3、Element-plus 构建组图文章

在这里插入图片描述

前言

在第一章节，我们把博物馆管理系统打了个地基，基本的产品架构和框架已经都落实到位；
第二章节，使用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 属性我们就可以自由地组合布局。

<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、混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
在这里插入图片描述

<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，现代浏览器下有效 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 栅格占据的列数 number — 24
offset 栅格左侧的间隔格数 number — 0
push 栅格向右移动格数 number — 0
pull 栅格向左移动格数 number — 0
xs <768px 响应式栅格数或者栅格属性对象 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加载数据


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

总结

效果可见页面中的【馆藏国宝】模块：http://139.159.230.49/

以上就是今天要讲的内容，本文介绍了在Vue3里，如何使用Element-plus 的Layout 布局构建组图文章功能，如何使用axios去加载Vue项目里的JSON格式文件数据填充到 Layout 布局里。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue实战

博物馆管理系统实战

vuejs

javascript

前端

[Vue3 博物馆管理系统] 使用Vue3、Element-plus的Layout 布局构建组图文章 的相关文章

随机推荐

  • Xilinx COE文件生成

    一 COE文件格式 举个例子 这是一个完整的COE文件 第一行 MEMORY INITIALIZATION RADIX 16 表示的是几进制数据 第二行 MEMORY INITIALIZATION VECTOR 表示你要初始化的内容 然后把

  • 服务器远程管理简介（ILO,BMC,RSA）

    Author Skate time 2016 09 18 转载 http blog csdn net cymm liu article details 8447623 现在说说HP的服务器 好像HP的服务器标配都集成了iLO的 也就是HP自

  • js Buffer常用方法

    构造 alloc构造 10个空间 16进制格式 所以数字16显示为10 var buf1 Buffer alloc 10 16 console log buf1 allocUnsafe构造 分配10个空间 但空间内的数据不一定为空 var

  • 欢迎访问我的个人博客

    双11弄了个服务器 搭建了第一个自己的博客 开心 欢迎来访问 ISHEEPI 之后的博客也会发到自己的网站上了 不远遐路 幸见光临

  • VueComponent介绍&一个重要的内置关系（VueComponent.prototype.__proto__===Vue.prototype）

    一 VueComponent介绍 关于Vuecomponent 1 school组件本质是一个名为VueComponent的构造函数 且不是程序员定义的 是Vue extend生成的 2 我们只需要写

  • python机器学习之决策树案例——泰坦尼克号幸存者的预测

    决策树 Decision Tree 是一种非参数的有监督学习方法 它能够从一系列有特征和标签的数据中总结出决策规则 并用树状图的结构来呈现这些规则 以解决分类和回归问题 决策树算法容易理解 适用各种数据 在解决各种问题时都有良好表现 尤其是

  • 开关电源UVLO的迟滞(Hysteresis)的含义

    关心迟滞的目的在于可以考察在开关电源上电和下电两种情况下的电平门限值 任何只给出UVLO和Hysteresis的值 不给测试条件的都是耍流氓 图1 同相迟滞比较器的电路和传输特性 上图 b 中可以看出 当Ui gt UTH U0 Uz 当U

  • 保研之路——中科大信息学院自动化系预推免

    中科大信息学院自动化系预推免 个人情况 高校复试参与情况 中科大信息学院自动化系直硕 9 18 结语 嗯 抱着不白花这么多路费住宿费的初衷准备写一个保研经验贴 希望学弟学妹少花点钱吧orz 我的战术大概是只要学校给我发了邀请我就去 除了时间

  • pid巡线算法程序_技术分享——从单个到多个颜色传感器巡线原理解析

    巡线竞速是常见的机器人比赛项目 它对速度和精准度要求都比较高 该项目大多要求现场进行结构搭建 并且赛前只提供培训参考地图 比赛使用的地图和巡线任务一般是现场才进行公布 对于参赛选手的能力要求较高 巡线任务的基础要求是车体 符合规格 的正投影

  • 关于通用型人工智能语言模型ChatGPT的感悟

    现在目前全世界只有一家真正有实在意义的通用性人工智能 也就是自然语言处理模型 即米国OpenAI旗下的ChatGPT 目前已经更新至GPT 4模型 这个秘密企划是从2017年开始的 一直到2023年才正式公开 在公开的几天内 被众领域学者科

  • docker入门学习笔记

    docker基础操作入门笔记 镜像操作 容器操作 数据卷操作 挂载 为什么要挂载 如何挂载 其他 docker设置开机自启 时间同步问题 jar包的运行 文章中几乎所有的写容器Id的地方 都可以使用容器名称来写命令 镜像操作 列出镜像列表

  • 安卓app后台运行时activity和dialog的一些区别

    Android app后台运行时 startactivity时可以启动其他activity 但是要弹出一个dialog是不被允许的 所以我的方案是把activity当做dialog来使用 这样就能正常弹出了 方法是给activity一个di

  • 【c++之容器】——list的源码模拟实现

    目录 1 list的概述 2 list的节点 3 list的迭代器 4 list的数据结构 a 插入节点 b 删除节点 1 list的概述 list的底层是 双向链表结构 双向链表中每个元素存储在互不相关的独立节点中 在节点中通过指 针指向

  • Docker学习2-docker存储之卷(Volume)

    参考博客 https www cnblogs com sammyliu p 5932996 html 有状态容器都有数据持久化需求 Docker 采用 AFUS 分层文件系统时 文件系统的改动都是发生在最上面的容器层 在容器的生命周期内 它

  • PRML一书中关于贝叶斯曲线拟合结论的推导细节

    PRML一书中关于贝叶斯曲线拟合结论的推导细节 我们令训练数据集为 X T X T X T 对于一个新的点 x

  • GitBook使用教程

    各大站长平时除了写博客外 可以使用 gitbook 将一系列的博客专栏整理成电子书出版 这样既方便各大网友阅读 还可以带来新的离线阅读功能 在以前我们只能靠出版社 或者编写 word 文档 来实现 然而有了 gitbook 之后 一切都变得

  • Python 炫技操作：条件语句的六种写法（Python就是这么炫酷）

    有的人说 Python 入门容易 但是精通难的语言 这点我非常赞同 Python 语言里有许多 而且是越来越多 的高级特性 是 Python 发烧友们非常喜欢的 在这些人的眼里 能够写出那些一般开发者看不懂的高级特性 就是高手 就是大神 但

  • 1.两数之和

    两数之和 给定一个整数数组 nums 和一个整数目标值 target 请你在该数组中找出 和为目标值 target 的那 两个 整数 并返回它们的数组下标 你可以假设每种输入只会对应一个答案 但是 数组中同一个元素在答案里不能重复出现 你可

  • 网络—安全—防火墙

    网络 安全 防火墙 是什么 表面概念 防火墙 一种高级访问控制设备 置于不同网络安全域之间 它通过相关的安全策略来控制 允许 拒绝 监视 记录 进出网络的访问行为 是什么 设备结构和运行原理 设备结构 Netfilter是由Rusty Ru

  • [Vue3 博物馆管理系统] 使用Vue3、Element-plus的Layout 布局构建组图文章

    系列文章目录 第一章 定制上中下 顶部菜单 底部区域 中间主区域显示 三层结构首页 第二章 使用Vue3 Element plus菜单组件构建菜单 第三章 使用Vue3 Element plus走马灯组件构建轮播图 第四章 使用Vue3 E

热门标签