2021-11-21 vue笔记-PC端框架:Element-UI组件库(二) element-ui常用组件的介绍和使用

零.回顾

2021-07-09 vue笔记-PC端框架:Element-UI组件库(一) element-ui介绍安装和使用

一.基本组件

0.有哪些基本组件?

• layout布局
• container布局容器
• border边框
• icon图标
• button图标
  …

1.layout布局:通过基础的 24 分栏，迅速简便地创建布局

有哪些布局?

• 基础布局:使用单一分栏创建基础的栅格布局
• 分栏间隔:分栏之间存在间隔
• 混合布局:通过基础的1/24分栏任意扩展组合形成较为复杂的混合布局
• 分栏偏移:支持偏移指定的栏数
• 对齐方式:通过flex布局对分栏进行灵活的对齐

其他示例和效果查看官网:https://element.eleme.cn/#/zh-CN/component/layout

示例:使用row组件和col组件+span进行基础布局

home.vue

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