diff --git a/src/button/README.md b/src/button/README.md
index 4e070cef4..9063094b8 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -81,6 +81,13 @@ Vue.use(Button);
Vue Router
```
+### Custom Color
+
+```html
+Custom Color
+Custom Color
+```
+
## API
### Props
@@ -90,6 +97,7 @@ Vue.use(Button);
| type | Can be set to `primary` `info` `warning` `danger` | `string` | `default` |
| size | Can be set to `large` `small` `mini` | `string` | `normal` |
| text | Text | `string` | - |
+| color | Color | `string` | - |
| icon | Left Icon | `string` | - |
| tag | HTML Tag | `string` | `button` |
| native-type | Native Type Attribute | `string` | `''` |
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
index 9f434ce3f..499c47521 100644
--- a/src/button/README.zh-CN.md
+++ b/src/button/README.zh-CN.md
@@ -99,6 +99,15 @@ Vue.use(Button);
路由跳转
```
+### 自定义颜色
+
+通过`color`属性可以自定义按钮的颜色
+
+```html
+自定义颜色
+自定义颜色
+```
+
## API
### Props
@@ -108,6 +117,7 @@ Vue.use(Button);
| type | 类型，可选值为 `primary` `info` `warning` `danger` | `string` | `default` | 1.6.6 |
| size | 尺寸，可选值为 `large` `small` `mini` | `string` | `normal` | - |
| text | 按钮文字 | `string` | - | - |
+| color | 按钮颜色 | `string` | - | 2.1.3 |
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `string` | - | 2.0.0 |
| tag | HTML 标签 | `string` | `button` | - |
| native-type | 原生 button 标签 type 属性 | `string` | - | - |
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index aa17ba97a..2aac44bd1 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -138,6 +138,18 @@
to="index"
/>
+
+
+
+
+
@@ -167,7 +179,8 @@ export default {
loadingText: '加载中...',
router: '页面导航',
urlRoute: 'URL 跳转',
- vueRoute: '路由跳转'
+ vueRoute: '路由跳转',
+ customColor: '自定义颜色'
},
'en-US': {
type: 'Type',
@@ -192,7 +205,8 @@ export default {
loadingText: 'Loading...',
router: 'Router',
urlRoute: 'URL',
- vueRoute: 'Vue Router'
+ vueRoute: 'Vue Router',
+ customColor: 'Custom Color'
}
}
};
diff --git a/src/button/index.tsx b/src/button/index.tsx
index 194d6d31e..6332b1a21 100644
--- a/src/button/index.tsx
+++ b/src/button/index.tsx
@@ -1,6 +1,6 @@
import { createNamespace } from '../utils';
import { emit, inherit } from '../utils/functional';
-import { BORDER_SURROUND } from '../utils/constant';
+import { BORDER_SURROUND, WHITE } from '../utils/constant';
import { routeProps, RouteProps, functionalRoute } from '../utils/router';
import Icon from '../icon';
import Loading, { LoadingType } from '../loading';
@@ -19,6 +19,7 @@ export type ButtonProps = RouteProps & {
size: ButtonSize;
text?: string;
icon?: string;
+ color?: string;
block?: boolean;
plain?: boolean;
round?: boolean;
@@ -44,7 +45,28 @@ function Button(
slots: DefaultSlots,
ctx: RenderContext
) {
- const { tag, icon, type, disabled, loading, hairline, loadingText } = props;
+ const {
+ tag,
+ icon,
+ type,
+ color,
+ plain,
+ disabled,
+ loading,
+ hairline,
+ loadingText
+ } = props;
+
+ const style: Record = {};
+
+ if (color) {
+ style.borderColor = color;
+ style.color = plain ? color : WHITE;
+
+ if (!plain) {
+ style.backgroundColor = color;
+ }
+ }
function onClick(event: Event) {
if (!loading && !disabled) {
@@ -62,10 +84,10 @@ function Button(
type,
props.size,
{
+ plain,
disabled,
hairline,
block: props.block,
- plain: props.plain,
round: props.round,
square: props.square
}
@@ -105,6 +127,7 @@ function Button(
return (
-
+
+
`;