elementUI
- 一 Basic
-
- 1.1 Layout 布局
- 1.2 Container容器
- 1.3 色彩 字体 边框 图标
- 1.4 按钮
- 1.5 文字链接
- 二 Form 表单
-
- 2.1 Radio 单选框 CheckBox 多选框
- 2.2 input 输入框
- 2.3 input 计数器
- 2.4 Select 选择器和Cascader 级联选择
-
- 2.4.1 可搜索的下拉选择器
- 2.5 switch开关
- 2.6 Slider 滑块
- 2.7 时间日期选择器
- 2.8 upload 上传
- 2.9 Rate 评分
- 2.10 颜色板
- 2.11 Transfer 穿梭框
- 2.12 from 表单
- 三 Data
-
- 3.1 Table 表格
- 3.2 Tag 标签
- 3.3 Progress 进度条
- 3.4 Tree 树形控件
- 3.5 Pagination 分页
- 3.6 Badge 标记
- 3.7 Avatar 头像
- 四 Notic
-
- 4.1 Alert警告
- 4.2 Loading 加载
- 4.3 消息提示
- 4.4 消息弹框
- 4.5 消息通知
- 五 Navigation 导航
- 六 others
-
- 6.1 Dialog对话框
- 6.2 Card卡片
- 6.3 Carousel 轮播图
- 6.4 Collapse折叠面板
- 6.5 divider 分割线
- 6.6 Calender 日历
- 6.7 图片image
- 6.8 infiniteScroll 无线滚动
- 6.9 Drawer 抽屉
一 Basic
Basic 总结
第一块: 用于布局和封装 Layout container
第二块: 对盒子进行修饰 word color border icon
第三块: 触发事件和跳转 click redirect
整体结构
1.1 Layout 布局
1 布局就相当于对组件进行排列，让组件出现在合适的位置
1.2 Container容器
1 容器就相当于一个个盒子，布局侧重的是位置，而盒子就用于封装
1.3 色彩 字体 边框 图标
1 用于对盒子进行修饰
1.4 按钮
1 最常用的组件，用于触发事件
1.5 文字链接
1 用于跳转
二 Form 表单
1 表单核心是form 和form-item
Form 表单总结
1 第一块: 是选择 单选 多选 下拉选 级联选 穿梭选
2 第二块: input 用于输入
3 第三块: 开关和滑块
4 第四块: others 日期，颜色板，上传，评分
5 第五块: from 表单
2.1 Radio 单选框 CheckBox 多选框
1 方便用户勾选内容
2.2 input 输入框
1 用于和用户交互，读取用户输入的数据
2.3 input 计数器
1 用于读取数据
2.4 Select 选择器和Cascader 级联选择
1 方便用户勾选
2.4.1 可搜索的下拉选择器
<el-select v-model="value" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
1 options 是一个数组，是从后台查询出来的数据
2 :babel 是展示在下拉菜单中数据
3 :value 是给v-model 绑定的键赋值
4 filterable 表示是可以搜索的
2.5 switch开关
1 用于直观展示boolean值
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
1 v-model 表示键
2 active-value 表示打开时候的值
3 inactive-value 表示关闭时候的值
4 active-color 表示打开时候的颜色
5 inactive-color 表示关闭时候的颜色
2.6 Slider 滑块
1 暂时没有使用过
2.7 时间日期选择器
1 直接使用就行
2.8 upload 上传
1 用于提交文件
2.9 Rate 评分
1 用于评价给分
2.10 颜色板
1 用于颜色选择
2.11 Transfer 穿梭框
2.12 from 表单
三 Data
第一块: 表格和标签
第二块: 树形控件和分页
第三块: 标记,头像,进度条
3.1 Table 表格
3.2 Tag 标签
3.3 Progress 进度条
3.4 Tree 树形控件
3.5 Pagination 分页
3.6 Badge 标记
3.7 Avatar 头像
四 Notic
Notic 总结
1 第一块: 加载
2 第二块: 提示弹框通知
4.1 Alert警告
4.2 Loading 加载
4.3 消息提示
4.4 消息弹框
4.5 消息通知
五 Navigation 导航
暂时没有用上（先不了解）
六 others
第一块: 对话框，轮播图
第二块: 图片，卡片
第三块: 分隔线，日历，无限滚动
第四块: 折叠面板，抽屉