【 Element UI 】基础使用

最新推荐文章于 2024-09-20 09:31:26 发布

原创最新推荐文章于 2024-09-20 09:31:26 发布 · 2.2k 阅读

CC 4.0 BY-SA版权

本文详细介绍了Element UI的Layout布局系统，包括24格系统、分栏间隔、偏移和对齐方式。同时，讲解了Container容器的使用，如Header、Aside、Main和Footer的灵活搭配，以及Flex布局的应用。此外，还涵盖了Icon图标、Button按钮和Link链接的多种样式和功能，如按钮的加载状态、尺寸和响应式设计，以及链接的图标和禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layout布局

将页面划分为24等分，方便迅速简便的创建布局

分栏间隔
- :gutter = “” 设置间隔
占据的份数
- :span = “” 设置每一个el-col 占据的份数
偏移
- :offset = “” 设置偏移的份数(默认是0,最大不能超过24 除开以经被占据的份数)
对齐方式
- type = “flex” 设置 el-row 为flex布局通过 justify 设置对其方式
- justify = "start / center / end / space-between / space-around "
响应式布局
- xs、sm、md、lg 、xl

	<el-row type="flex" justify="" :gutter="<指定每一栏之间的间隔>">
		<el-col :span="<设置占据的页面份数>" :offset="<number>"></el-col>
		<el-col :span="<设置占据的页面份数>" :offset="<number>"></el-col>
	</el-row>

Container布局容器

采用flex布局

<el-container> 外层容器
	// 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列
	
	// 设置子列的排列方向
	// 包含 <el-header> 或 <el-footer> 时， direction = "vertical" 否则direction = "horizontal "
	<el-container direction="horizontal / vertical">
			// coding 
	</el-container>
	
<el-header>		顶栏容器
	<el-header height="xxxpx"></el-header>
	
<el-aside>		侧边栏容器
	<el-aside width="xxxpx"></el-aside>
	
<el-main>		主要区域容器
		
<el-footer>		底栏容器
	<el-footer height="xxxpx"></el-footer>

Icon图标

通过设置类名 class="el-icon-iconName"

Button按钮

// 给el-button设置 plain(颜色较淡一点) / round(按钮有点小圆角样式) / circle (圆形按钮)
<el-button plain / round / circle></el-button>

// 设置type = "primary / success / info / warning / danger" 设置按钮的背景色
<el-button plain / round / circle type="primary / success / info / warning / danger"></el-button>

// 通过设置 icon = el-icon-iconName 设置按钮的样式
<el-button plain / round / circle "primary / success / info / warning / danger" icon="el-icon-iconName"></el-button>

// 设置disabled  定义按钮是否可用
<el-button plain / round / circle "primary / success / info / warning / danger" icon="el-icon-iconName" dsiabled>
</el-button>

// 多个按钮组成一个按钮组
<el-button-group>
  <el-button></el-button>
  <el-button></el-button>
  <el-button></el-button>
</el-button-group>

// 加载中样式
<el-button :loading = "true"></el-button>

// 设置不同的尺寸的按钮
// mini 超小按钮    small 小型按钮  medium 中等按钮
<el-button size="mini / small / medium></el-button>

Link链接

// 通过type 设置文字的颜色
<el-link type="primary / success / info / warning / danger"></el-link>

// 通过disabled 设置文字是否被禁用
<el-link type="primary / success / info / warning / danger" disabled></el-link>

// 通过:underline="false" 设置文字是否具有下划线
<el-link type="primary / success / info / warning / danger" disabled :underline="false">
</el-link>
	
// 通过设置 icon = "el-icon-iconName" 设置图标
<el-link icon="el-icon-edit">编辑</el-link>