前端饿了吗框架的学习（element）

小编在学习前端的历程中、工作中主要使用到的是vue框架，然后下面写的笔记大多倾向于vue框架下使用的element ui一、element的安装使用1.使用webpack打包工具配合使用npm i element-ui -S...

喲呦秃了

4391人浏览 · 2020-05-01 18:15:54

喲呦秃了 · 2020-05-01 18:15:54 发布

小编在学习前端的历程中、工作中主要使用到的是vue框架，然后下面写的笔记大多倾向于vue框架下使用的element ui

一、element的安装使用

1.使用webpack打包工具配合使用

npm i element-ui -S

二、组件的使用

1、layout布局

<el-row :gutter="20">
	<el-col :span='8'></el-col>
	<el-col :span='6'></el-col>
	<el-col :span='6'></el-col>	
</el-row>
<el-row :gutter="20">
	<el-col :span='8'></el-col>
	<el-col :span='6' :offset='1'></el-col>
	<el-col :span='6' :offset='2'></el-col>	
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
  <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-row>

属性(el-row)	说明
gutter	每一列间隔
justify	flex布局下面的水平排序方式（start,end,center,space-around,span-between）
align	flex布局下面的垂直排序方式（top/middle/bottom）

属性（el-col）	功能
span	栅格占据的列数
offset	栅格左侧的间隔格数
type	布局模式(flex)
push	格栅向右移动格数
pull	格栅向左移动格数
xs	<768px 响应式栅格数或者栅格属性对象
sm	≥768px 响应式栅格数或者栅格属性对象
md	≥992px 响应式栅格数或者栅格属性对象
lg	≥1200px 响应式栅格数或者栅格属性对象
xl	≥1920px 响应式栅格数或者栅格属性对象

2、Button按钮

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

属性	作用
size	尺寸(medium/small/mini)
type	类型（primary/success/warming/danger/info/text）
plain	是否为朴素按钮
round	是否为圆角按钮
cricle	是否为圆形按钮
loading	是否为加载状态中
disabled	是否为禁用状态
icon	图标类名
autofocus	是否默认聚焦
native-type	原生type属性

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^