element-ui简单笔记(上)
element-ui的简单笔记
关注一下公众号：内有相关文章！！
一、element-ui简介
1.Element UI 引言
官网:https://element.eleme.io/#/zh-CN
1.1 官方定义
网站快速成型工具 和 桌面端组件库
1.2 定义
element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
1.3 由来
饿了么前端团队 基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件。
二、安装element-ui
2.1通过vue脚手架创建项目
vue init webpack element(项目名)
2.2在vue脚手架项目中安装elementui
# 1.下载elementui的依赖
npm i element-ui -S
# 2.指定当前项目中使用elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//在vue脚手架中使用elementui
Vue.use(ElementUI);
三、按钮组件(示例)
3.1 默认样式按钮
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
3.2 简洁按钮
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
3.3 圆角按钮
<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>
3.4 图标按钮
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
四、按钮组件的详细使用
总结:日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头
4.1创建按钮
<el-button>默认按钮</el-button>
4.2 按钮属性使用
<el-button type="primary" 属性名=属性值>默认按钮</el-button>
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>
总结:在elementui中所有组件的属性全部写在组件标签上
4.3 按钮组使用
<el-button-group>
<el-button type="primary" icon="el-icon-back">上一页</el-button>
<el-button type="primary" icon="el-icon-right">下一页</el-button>
</el-button-group>
注意:
- 在element ui中所有组件都是
el-组件名称方式进行命名 - 在element ui中组件的属性使用
都是直接将属性名=属性值方式写在对应的组件标签上
五、Link文字链接组件
5.1 文字链接组件的创建
<el-link>默认链接</el-link>
5.2 文字链接组件的属性的使用
<el-link target="_blank" href="http://www.baidu.com" >默认链接</el-link>
<el-link type="primary":underline="false">默认链接</el-link>
<el-link type="success" disabled>默认链接</el-link>
<el-link type="info" icon="el-icon-platform-eleme">默认链接</el-link>
<el-link type="warning">默认链接</el-link>
<el-link type="danger">默认链接</el-link>
六、Layout(栅格)布局组件
通过基础的 24 分栏，迅速简便地创建布局
在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)
6.1 使用Layout组件
<el-row>
<el-col :span="8">占用8份</el-col>
<el-col :span="8">占用8份</el-col>
<el-col :span="8">占用8份</el-col>
</el-row>
注意:
- 在一个布局组件中 是由
row和col组合而成 - 在使用时要区分
row属性和col属性
6.2 属性的使用
-
行属性使用
<el-row :gutter="50" tag="span"> <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col> <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col> <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col> <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col> </el-row> -
列属性的使用
<el-row> <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;">我是占用12分</div></el-col> <el-col :span="6"><div style="border: 1px blue solid;">我是占用6分</div></el-col> </el-row>
七、Container布局容器组件
7.1 创建布局容器
<el-container>
</el-container>
7.2 容器中包含的子元素
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
7.3 容器的嵌套使用
<!--创建容器-->
<el-container>
<!--header-->
<el-header><div><h1>我是标题</h1></div></el-header>
<!--容器嵌套使用-->
<el-container>
<!--aside-->
<el-aside><div><h1>我是菜单</h1></div></el-aside>
<!--main-->
<el-main><div><h1>我是中心内容</h1></div></el-main>
</el-container>
<el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>
7.4 水平容器
<el-container direction="horizontal">
<!--header-->
<el-header><div><h1>我是标题</h1></div></el-header>
<el-container>
<!--aside-->
<el-aside><div><h1>我是菜单</h1></div></el-aside>
<!--main-->
<el-main><div><h1>我是中心内容</h1></div></el-main>
</el-container>
<el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>
注意:当子元素中没有有 el-header 或 el-footer 时容器排列为水平
7.5 垂直容器
<el-container direction="vertical">
<!--header-->
<el-header><div><h1>我是标题</h1></div></el-header>
<el-container>
<!--aside-->
<el-aside><div><h1>我是菜单</h1></div></el-aside>
<!--main-->
<el-main><div><h1>我是中心内容</h1></div></el-main>
</el-container>
<!--footer-->
<el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>
element-ui的组件太多了，我也就是把我最近练习的给记录下来，其余的这里就不再一一介绍了，大家有需要的可以看文档，自行去测试。谢谢！！！
