[new feature] Button: add color prop (#4124)

src/button/README.md

@@ -81,6 +81,13 @@ Vue.use(Button);
 <van-button type="primary" to="index">Vue Router</van-button>
 ```
 
+### Custom Color
+
+```html
+<van-button color="#7232dd">Custom Color</van-button>
+<van-button color="#7232dd" plain>Custom Color</van-button>
+```
+
 ## 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` | `''` |

src/button/README.zh-CN.md

@@ -99,6 +99,15 @@ Vue.use(Button);
 <van-button type="primary" to="index">路由跳转</van-button>
 ```
 
+### 自定义颜色
+
+通过`color`属性可以自定义按钮的颜色
+
+```html
+<van-button color="#7232dd">自定义颜色</van-button>
+<van-button color="#7232dd" plain>自定义颜色</van-button>
+```
+
 ## 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` | - | - |

src/button/demo/index.vue

@@ -138,6 +138,18 @@
         to="index"
       />
     </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <van-button
+        color="#7232dd"
+        :text="$t('customColor')"
+      />
+      <van-button
+        plain
+        color="#7232dd"
+        :text="$t('customColor')"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -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'
     }
   }
 };

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<ButtonProps>
 ) {
-  const { tag, icon, type, disabled, loading, hairline, loadingText } = props;
+  const {
+    tag,
+    icon,
+    type,
+    color,
+    plain,
+    disabled,
+    loading,
+    hairline,
+    loadingText
+  } = props;
+
+  const style: Record<string, string> = {};
+
+  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 (
     <tag
+      style={style}
       class={classes}
       type={props.nativeType}
       disabled={disabled}
@@ -121,6 +144,7 @@ Button.props = {
   ...routeProps,
   text: String,
   icon: String,
+  color: String,
   block: Boolean,
   plain: Boolean,
   round: Boolean,

src/button/test/__snapshots__/demo.spec.js.snap

@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
   </div>
   <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
   <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal">
       <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
@@ -32,5 +32,6 @@ exports[`renders demo correctly 1`] = `
       迷你按钮
     </span></button></div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
+  <div><button class="van-button van-button--default van-button--normal" style="border-color: #7232dd; color: rgb(255, 255, 255); background-color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="border-color: #7232dd; color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button></div>
 </div>
 `;