前端饿了吗框架的学习element
目录
前端饿了吗框架的学习（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属性 |