【 Element UI 】基础使用

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>