-
圆形按钮
-
主要按钮
-
成功按钮
-
信息按钮
-
警告按钮
-
危险按钮
-
-
-
-
-
+
+
big 和 mini 两种尺寸留作备用
+
+
+ big:
+ 主要按钮
+ 次要按钮
+ 次次要按钮
+
+
+
+ mini:
+ 主要按钮
+ 次要按钮
+ 次次要按钮
```
:::
-公司实际项目中用的比较多的几种按钮
-
-默认按钮
-主要按钮
-朴素按钮
-主要按钮
-圆形按钮
-主要按钮
-
+### 文字按钮
-
-
- 危险按钮
- 危险按钮
- 危险按钮
-
+没有边框和背景色的按钮，你可以使用`text`属性来定义按钮是否是文本样式，它接受一个`Boolean`值。如果是文字类链接，不用 el-button 这个组件
-### 禁用状态
+:::demo
+```html
+
+ Kyligence
+ Kyligence
+
+```
+:::
-按钮不可用状态。
+### 纯图标按钮
-:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
+图标按钮 hover 需要加上 tooltips 来表示这按钮是用来干嘛的，尺寸一般用 small 类型，表中表时，需要用 mini 尺寸
+:::demo
```html
- 默认按钮
- 主要按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
+
+
+
+
+
+
+
+
+
-
-
朴素按钮
-
主要按钮
-
成功按钮
-
信息按钮
-
警告按钮
-
危险按钮
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常状态:
+
+
+
+
+
+
+ disable 状态:
+
+
+
```
:::
-### 文字按钮
+### 文字 + icon
-没有边框和背景色的按钮。
+各种规范类型的按钮 前缀加 icon 的情况
-:::demo 你可以使用`text`属性来定义按钮是否是文本样式，它接受一个`Boolean`值。
+:::demo
```html
-
-
主要按钮
-
成功按钮
-
信息按钮
-
警告按钮
-
危险按钮
-
禁用按钮
+
+ 主要按钮
+ 次要按钮
+ 次次要按钮
+
+
+
+ 主要按钮
+ 次要按钮
+ 次次要按钮
```
:::
-### 图标按钮
-
-带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
-
-:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
+### 警告状态
+警告状态：适用于危险操作（不希望用户操作此按钮，会带来重大影响的情形下）。提交失败的情况，不适用此按钮，只能使用次要按钮形式，避免过度强调。
+:::demo
```html
-
-
-
-
搜索
-
上传
+
+ 高高危操作
+ 高危操作
+ 删除
+
```
:::
+
### 按钮组
-以按钮组的方式出现，常用于多项类似操作。
+以按钮组的方式出现，常用于多项类似操作，常用的是蓝底白字和白底蓝字款
:::demo 使用`
`标签来嵌套你的按钮。
```html
+水平组织
+主要按钮(左：正常，右：带 disabled)
-
- 上一页
- 下一页
-
-
-
-
-
-
+
+ 编辑
+ 分享
+ 删除
+
+
+
全部 disabled
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
不同位置 disabled
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
有多个 disabled
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
+
纯 icon 版
+
+
+
+
+
+
+
+
+
+
+
+
次要按钮(左：正常，右：带 disabled)
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
全部 disabled
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
不同位置 disabled
+
+ 编辑
+ 分享
+ 删除
+
+
+ 编辑
+ 分享
+ 删除
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
有多个 disabled
+
+ 编辑
+ 分享
+ 删除
+
+
+ 编辑
+ 分享
+ 删除
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
纯 icon 版
+
+
+
+
+
+
+
+
+
+
+
+
次次要按钮(左：正常，右：带 disabled)
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
全部 disabled
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
不同位置 disabled
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
有多个 disabled
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
+ 编辑
+ 分享
+ 删除
+
+
+
纯 icon 版
+
+
+
+
+
+
+
+
+
+
+
+
+
+垂直组织
+
+主要按钮(左：正常，右：带 disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+次要按钮(左：正常，右：带 disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+次次要按钮(左：正常，右：带 disabled)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
:::
@@ -224,30 +611,14 @@ locales: {
}
}
```
-:::demo 支持的尺寸：`big`、 `medium`、`small`、`mini`，通过设置`size`属性来配置它们，默认是medium的尺寸。
+:::demo 支持的尺寸：`big`、 `medium`、`small`、`mini`，通过设置`size`属性来配置它们，默认是medium的尺寸，但现在项目中用的都是small 尺寸的这个
```html
- EN
- 中文
-
-
- EN
- 中文
-
-
- EN
- 中文
-
-
- EN
- 中文
-
-
- EN
- 中文
-
+ EN
+ 中文
+
-```
-:::
-
-### 动态编辑标签
-
-动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现
-
-:::demo
-```html
-
- {{tag}}
-
-
-
-+ New Tag
-
-
-
+
```
:::
### 不同尺寸
-Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+规范中建议使用两种尺寸，small 和 mini。
-:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+:::demo mini 尺寸主要适用于 1. 小型 input 框（h = 24px）里的多选情况，2. 表中表的编辑状态下
```html
-默认标签
-中等标签
+常用尺寸：
小型标签
+
+表中表的编辑状态时适用的尺寸：
超小标签
+
+留作备用的两个尺寸：default medium
+
+ 默认标签
+ 中等标签
+
+
```
:::
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
index 54bd67915a2..505366b0bd9 100644
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -13,13 +13,16 @@
.avatar-uploader {
.el-upload {
border: 1px dashed #d9d9d9;
- border-radius: 6px;
+ border-radius: 2px;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover, &:focus {
border-color: #409EFF;
+ i {
+ color: #409EFF;
+ }
}
}
.avatar-uploader-icon {
@@ -189,13 +192,16 @@