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

171 阅读 0 评论 113 点赞

我是靠谱客的博主耍酷红牛，这篇文章主要介绍前端饿了吗框架的学习（element），现在分享给大家，希望可以做个参考。

小编在学习前端的历程中、工作中主要使用到的是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属性