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

news2024/11/16 17:30:02

系列文章目录

第一章 定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页
第二章 使用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 属性我们就可以自由地组合布局。

<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——
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
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 布局里。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/985231.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

android framework之Applicataion启动流程分析（四）

android framework之Applicataion启动流程分析（四）

本文主要学习并了解Application的Activity启动流程。 这边先分析一下Launcher是如何启动进程的Acitivity流程。从Launcher启动Acitivity的时候&#xff0c;它是把启动任务丢给instrumentation模块去协助完成&#xff0c;由它进一步调用AMS的startActivity()方法 去启动&#xf…
阅读更多...
基于resnet网络架构训练图像分类模型

基于resnet网络架构训练图像分类模型

数据预处理部分&#xff1a; 数据增强&#xff1a;torchvision中transforms模块自带功能&#xff0c;比较实用数据预处理&#xff1a;torchvision中transforms也帮我们实现好了&#xff0c;直接调用即可DataLoader模块直接读取batch数据 网络模块设置&#xff1a; 加载预训练…
阅读更多...
ARM DIY（九）陀螺仪调试

ARM DIY（九）陀螺仪调试

前言 今天调试六轴陀螺仪 MPU6050 硬件 硬件很简单&#xff0c;使用 I2C 接口&#xff0c;并且没有使用中断引脚。 焊接上 MPU6050 芯片和上拉电阻、滤波电容。 检测 MPU6050 是挂在 I2C-0 上的&#xff0c;I2C-0 控制器的驱动已 OK&#xff0c;所以直接使用 I2C-0 检测 …
阅读更多...
2023 年前端编程 NodeJs 包管理工具 npm 安装和使用详细介绍

2023 年前端编程 NodeJs 包管理工具 npm 安装和使用详细介绍

npm 基本概述 npm is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well. npm 官方网站&#xff1a;https://www.npmjs.…
阅读更多...
程序员做哪些副业可以日赚一百？

程序员做哪些副业可以日赚一百？

日赚一百&#xff1f;对程序员来说简直不要太容易&#xff01;下面给程序员们推荐一些日赚100的副业&#xff1a; ①外包接单 程序员简单粗暴赚钱的副业之一。 外包接单的类型包括但不限于&#xff1a;软件开发、硬件开发、小程序功能开发、web开发……大到一个系统的开发、…
阅读更多...
外包干了三年，我承认我确实废了……

外包干了三年，我承认我确实废了……

没错&#xff0c;我也干过外包&#xff0c;一干就是三年&#xff0c;三年后&#xff0c;我废了…… 虽说废的不是很彻底&#xff0c;但那三年我几乎是出差了三年、玩了三年、荒废了三年&#xff0c;那三年&#xff0c;我的技术能力几乎是零成长的。 说起这段三年的外包经历&a…
阅读更多...
对象临时中间状态的条件竞争覆盖

对象临时中间状态的条件竞争覆盖

Portswigger练兵场之条件竞争 &#x1f984;条件竞争之对象临时中间状态的条件竞争 Lab: Partial construction race conditions&#x1f680;实验前置必要知识点 某些框架尝试通过使用某种形式的请求锁定来防止意外的数据损坏。例如&#xff0c;PHP 的本机会话处理程序模块…
阅读更多...
任务管理系统所需功能概述

任务管理系统所需功能概述

"任务管理需要有哪些功能&#xff1f;清晰的任务创建与编辑、智能分类和标签系统、提醒与通知功能、进度跟踪与报告、协作与共享功能、集成与兼容性。" 一款优秀的任务管理工具可以帮助我们有效地规划、执行和监控各项任务&#xff0c;提高工作效率。本文将探讨一款理…
阅读更多...
深度学习（十一）---zed 调用yolov5 进行识别目标并实时测距

深度学习（十一）---zed 调用yolov5 进行识别目标并实时测距

1. 前言 zed 相机测距有2种方式&#xff1a;一种是根据点云数据进行测试&#xff0c;二是根据zed获取深度值进行测距。上篇文章 调用yolov5模型进行实时图像推理及网页端部署 我们讲述了zed调用yolov5进行目标识别&#xff0c;我们在此基础上进一步实现目标测距功能。 2.深度…
阅读更多...
Apache httpd漏洞复现

Apache httpd漏洞复现

文章目录 未知后缀名解析漏洞多后缀名解析漏洞启动环境漏洞复现 换行解析漏洞启动环境漏洞复现 未知后缀名解析漏洞 该漏洞与Apache、php版本无关&#xff0c;属于用户配置不当造成的解析漏洞。在有多个后缀的情况下&#xff0c;只要一个文件含有.php后缀的文件即将被识别成PHP…
阅读更多...
微信多开bat代码

微信多开bat代码

目录标题 创建txt文件右键 点击新建文本文档 复制如下代码进去&#xff0c;将里面的微信地址改成自己的微信地址&#xff08;查看地址方法&#xff1a;右击微信图标->属性->目标&#xff09;复制如下代码 创建txt文件 右键 点击新建文本文档 复制如下代码进去&#xff0…
阅读更多...
Linux系统——MySQL安装（CentOS7 超详细演示）

Linux系统——MySQL安装（CentOS7 超详细演示）

Linux系统安装MySQL MySQL8.0.26-Linux版安装1. 准备一台Linux服务器2. 下载Linux版MySQL安装包3. 上传MySQL安装包4. 创建目录,并解压5. 安装mysql的安装包6. 启动MySQL服务7. 查询自动生成的root用户密码8. 修改root用户密码9. 创建用户10. 并给root用户分配权限11. 通过Data…
阅读更多...
2023高教社杯 国赛数学建模E题思路 - 黄河水沙监测数据分析

2023高教社杯 国赛数学建模E题思路 - 黄河水沙监测数据分析

1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…
阅读更多...
willchange 优化性能的原理是什么

willchange 优化性能的原理是什么

写在前面 今天说一下性能优化部分的其中一个点&#xff0c;这个点叫做 willchange&#xff0c;说他的原因主要有以下几个&#xff1a;第一很多人知道用这个可以提高性能但是不知道原因是什么&#xff0c;第二&#xff0c;我们用的时候他虽然可以提高性能&#xff0c;但是不代表…
阅读更多...
Revit SDK 介绍：GenericModelCreation常规模型的创建

Revit SDK 介绍：GenericModelCreation常规模型的创建

前言 这个例子介绍了如何创建拉伸、放样、扫掠、融合、放样融合&#xff0c;涵盖了一个建模软件需要的基本建模方法。 内容 CreateExtrusion 生成的放样融合接口&#xff1a; m_creationFamily.NewExtrusion(true, curve, sketchPlane, bottomProfile, topProfile)核心逻辑&…
阅读更多...
msvcr100.dll丢失应该怎么解决,比较靠谱的五种解决方法分享

msvcr100.dll丢失应该怎么解决,比较靠谱的五种解决方法分享

首先&#xff0c;我们需要了解什么是msvcr100.dll。msvcr100.dll是Microsoft Visual C 2010 Redistributable Package的一部分&#xff0c;它包含了一些运行时库&#xff0c;用于支持某些程序的运行。简单来说&#xff0c;msvcr100.dll就是一个“桥梁”&#xff0c;连接了我们的…
阅读更多...
组织架构图怎么做？手把手教你绘制完美的组织架构图

组织架构图怎么做？手把手教你绘制完美的组织架构图

组织架构图是企业和组织中不可或缺的工具&#xff0c;它以图形化的方式展示了各级层次的关系&#xff0c;帮助人们更好地理解和管理整体结构。本文将为你详细介绍绘制组织架构图的要素、步骤和技巧&#xff0c;并推荐四款强大的绘图软件&#xff0c;让你轻松绘制完美的组织架构…
阅读更多...
无涯教程-JavaScript - DELTA函数

无涯教程-JavaScript - DELTA函数

描述 DELTA函数测试两个值是否相等。如果number1 number2,则返回1&#xff1b;否则返回1。否则返回0。 您可以使用此功能来过滤一组值。如,通过合计几个DELTA函数,您可以计算相等对的计数。此功能也称为Kronecker Delta功能。 语法 DELTA (number1, [number2])争论 Argum…
阅读更多...
RK3588算法盒子maskrom模式下系统烧录

RK3588算法盒子maskrom模式下系统烧录

先在firefly官网下载bulidroot文件&#xff0c;然后进行烧录相关文件。 点击upgrade&#xff0c;进行烧录升级&#xff1b; 等待烧录完成后&#xff0c; 重新开机进入loader模式下&#xff0c; 进行烧录Untunt20.04系统的操作就行。
阅读更多...
企业电脑文件加密系统 / 防泄密软件——「天锐绿盾」

企业电脑文件加密系统 / 防泄密软件——「天锐绿盾」

「天锐绿盾」是一种公司文件加密系统&#xff0c;旨在保护公司内网数据安全&#xff0c;防止信息泄露。该系统由硬件和软件组成&#xff0c;其中包括服务端程序、控制台程序和终端程序。 PC访问地址&#xff1a; isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023