From 24f5a91cd3008ed8a4e9bda392c9cb08fb1db89f Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 9 Aug 2019 14:15:49 +0800
Subject: [PATCH] [improvement] add constant of border (#4078)

---
 src/action-sheet/demo/index.vue  |  2 +-
 src/action-sheet/index.tsx       |  5 +++--
 src/address-list/Item.tsx        |  2 +-
 src/button/index.tsx             |  3 ++-
 src/cell-group/index.tsx         |  3 ++-
 src/circle/index.js              |  2 +-
 src/collapse-item/index.js       |  3 ++-
 src/collapse/index.js            |  3 ++-
 src/contact-list/index.tsx       |  2 +-
 src/coupon/index.js              |  2 +-
 src/dialog/Dialog.js             |  5 +++--
 src/divider/demo/index.vue       |  2 +-
 src/dropdown-menu/index.js       |  4 ++--
 src/grid-item/index.js           |  3 ++-
 src/grid/index.js                |  3 ++-
 src/icon/demo/index.vue          |  2 +-
 src/index-anchor/index.js        |  3 ++-
 src/index-bar/index.js           |  2 +-
 src/loading/index.tsx            |  2 +-
 src/nav-bar/index.tsx            |  3 ++-
 src/notify/Notify.tsx            |  2 +-
 src/notify/index.ts              |  2 +-
 src/number-keyboard/Key.js       |  3 ++-
 src/number-keyboard/index.js     |  3 ++-
 src/pagination/index.js          |  7 ++++---
 src/panel/index.tsx              |  5 +++--
 src/password-input/index.tsx     |  5 +++--
 src/picker/index.js              |  6 +++---
 src/progress/index.js            |  2 +-
 src/sidebar-item/index.js        |  5 +++--
 src/sidebar/index.js             |  3 ++-
 src/sku/components/SkuHeader.tsx |  3 ++-
 src/sku/components/SkuRow.tsx    |  3 ++-
 src/step/index.js                |  3 ++-
 src/steps/index.js               |  2 +-
 src/switch/index.tsx             |  2 +-
 src/tabbar/index.js              |  3 ++-
 src/tabs/index.js                |  3 ++-
 src/tag/index.tsx                |  5 ++---
 src/utils/color.ts               |  6 ------
 src/utils/constant.ts            | 16 ++++++++++++++++
 41 files changed, 88 insertions(+), 57 deletions(-)
 delete mode 100644 src/utils/color.ts
 create mode 100644 src/utils/constant.ts

diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 12b922602..e7a7f2dc5 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import { GREEN } from '../../utils/color';
+import { GREEN } from '../../utils/constant';
 
 export default {
   i18n: {
diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
index 321199a9f..d40f219b1 100644
--- a/src/action-sheet/index.tsx
+++ b/src/action-sheet/index.tsx
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
+import { BORDER_TOP, BORDER_BOTTOM } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
 import Popup from '../popup';
@@ -48,7 +49,7 @@ function ActionSheet(
   function Header() {
     if (title) {
       return (
-        <div class={[bem('header'), 'van-hairline--bottom']}>
+        <div class={[bem('header'), BORDER_BOTTOM]}>
           {title}
           <Icon name="close" class={bem('close')} onClick={onCancel} />
         </div>
@@ -96,7 +97,7 @@ function ActionSheet(
 
     return (
       <div
-        class={[bem('item', { disabled }), item.className, 'van-hairline--top']}
+        class={[bem('item', { disabled }), item.className, BORDER_TOP]}
         style={{ color: item.color }}
         onClick={onClickOption}
       >
diff --git a/src/address-list/Item.tsx b/src/address-list/Item.tsx
index 4bf68baf2..784e695d1 100644
--- a/src/address-list/Item.tsx
+++ b/src/address-list/Item.tsx
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED } from '../utils/color';
+import { RED } from '../utils/constant';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
diff --git a/src/button/index.tsx b/src/button/index.tsx
index b0fb5042a..194d6d31e 100644
--- a/src/button/index.tsx
+++ b/src/button/index.tsx
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
+import { BORDER_SURROUND } from '../utils/constant';
 import { routeProps, RouteProps, functionalRoute } from '../utils/router';
 import Icon from '../icon';
 import Loading, { LoadingType } from '../loading';
@@ -69,7 +70,7 @@ function Button(
         square: props.square
       }
     ]),
-    { 'van-hairline--surround': hairline }
+    { [BORDER_SURROUND]: hairline }
   ];
 
   function Content() {
diff --git a/src/cell-group/index.tsx b/src/cell-group/index.tsx
index ce281b9eb..a54ea593d 100644
--- a/src/cell-group/index.tsx
+++ b/src/cell-group/index.tsx
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -20,7 +21,7 @@ function CellGroup(
 ) {
   const Group = (
     <div
-      class={[bem(), { 'van-hairline--top-bottom': props.border }]}
+      class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}
       {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}
diff --git a/src/circle/index.js b/src/circle/index.js
index 922f9a336..e8b2a0366 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
 import { raf, cancelRaf } from '../utils/dom/raf';
-import { BLUE, WHITE } from '../utils/color';
+import { BLUE, WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('circle');
 const PERIMETER = 3140;
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index 079e84cfe..1a9b44276 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -1,4 +1,5 @@
 import { createNamespace, isDef } from '../utils';
+import { BORDER_TOP } from '../utils/constant';
 import { raf, doubleRaf } from '../utils/dom/raf';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
@@ -147,7 +148,7 @@ export default createComponent({
     );
 
     return (
-      <div class={[bem(), { 'van-hairline--top': this.index }]}>
+      <div class={[bem(), { [BORDER_TOP]: this.index }]}>
         {Title}
         {Content}
       </div>
diff --git a/src/collapse/index.js b/src/collapse/index.js
index 1d75a8f1e..118935b02 100644
--- a/src/collapse/index.js
+++ b/src/collapse/index.js
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('collapse');
 
@@ -29,7 +30,7 @@ export default createComponent({
 
   render() {
     return (
-      <div class={[bem(), { 'van-hairline--top-bottom': this.border }]}>
+      <div class={[bem(), { [BORDER_TOP_BOTTOM]: this.border }]}>
         {this.slots()}
       </div>
     );
diff --git a/src/contact-list/index.tsx b/src/contact-list/index.tsx
index f5692991e..f2ad9cd0a 100644
--- a/src/contact-list/index.tsx
+++ b/src/contact-list/index.tsx
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED } from '../utils/color';
+import { RED } from '../utils/constant';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
diff --git a/src/coupon/index.js b/src/coupon/index.js
index 7047b9afb..9d07b560e 100644
--- a/src/coupon/index.js
+++ b/src/coupon/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED } from '../utils/color';
+import { RED } from '../utils/constant';
 import { padZero } from '../utils/format/string';
 import Checkbox from '../checkbox';
 
diff --git a/src/dialog/Dialog.js b/src/dialog/Dialog.js
index 323697bbf..a29424b2e 100644
--- a/src/dialog/Dialog.js
+++ b/src/dialog/Dialog.js
@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import { CloseOnPopstateMixin } from '../mixins/close-on-popstate';
 import Button from '../button';
@@ -99,7 +100,7 @@ export default createComponent({
 
     const hasButtons = this.showCancelButton && this.showConfirmButton;
     const ButtonGroup = (
-      <div class={['van-hairline--top', bem('footer', { buttons: hasButtons })]}>
+      <div class={[BORDER_TOP, bem('footer', { buttons: hasButtons })]}>
         {this.showCancelButton && (
           <Button
             size="large"
@@ -115,7 +116,7 @@ export default createComponent({
         {this.showConfirmButton && (
           <Button
             size="large"
-            class={[bem('confirm'), { 'van-hairline--left': hasButtons }]}
+            class={[bem('confirm'), { [BORDER_LEFT]: hasButtons }]}
             loading={this.loading.confirm}
             text={this.confirmButtonText || t('confirm')}
             style={{ color: this.confirmButtonColor }}
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index fbd0a2d35..44f333df0 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { BLUE } from '../../utils/color';
+import { BLUE } from '../../utils/constant';
 
 export default {
   i18n: {
diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index a1a7fc587..913990da9 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { BLUE } from '../utils/color';
+import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
 import { ParentMixin } from '../mixins/relation';
 import { ClickOutsideMixin } from '../mixins/click-outside';
 
@@ -103,7 +103,7 @@ export default createComponent({
     ));
 
     return (
-      <div ref="menu" class={[bem(), 'van-hairline--top-bottom']}>
+      <div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}>
         {Titles}
         {this.slots('default')}
       </div>
diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index 7a091d67f..17efc24ed 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -1,4 +1,5 @@
 import { createNamespace, addUnit } from '../utils';
+import { BORDER } from '../utils/constant';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
 import Icon from '../icon';
@@ -86,7 +87,7 @@ export default createComponent({
               clickable,
               surround: border && gutter
             }),
-            { 'van-hairline': border }
+            { [BORDER]: border }
           ]}
         >
           {this.renderContent()}
diff --git a/src/grid/index.js b/src/grid/index.js
index f609c6edd..0dca485dc 100644
--- a/src/grid/index.js
+++ b/src/grid/index.js
@@ -1,5 +1,6 @@
 import { createNamespace, addUnit } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('grid');
 
@@ -40,7 +41,7 @@ export default createComponent({
     return (
       <div
         style={this.style}
-        class={[bem(), { 'van-hairline--top': this.border && !this.gutter }]}
+        class={[bem(), { [BORDER_TOP]: this.border && !this.gutter }]}
       >
         {this.slots()}
       </div>
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index dbf960702..65a434813 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -41,7 +41,7 @@
 
 <script>
 import icons from '@vant/icons';
-import { BLUE } from '../../utils/color';
+import { BLUE } from '../../utils/constant';
 
 export default {
   i18n: {
diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js
index 3b2394f59..d60fc11e6 100644
--- a/src/index-anchor/index.js
+++ b/src/index-anchor/index.js
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
+import { BORDER_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('index-anchor');
 
@@ -50,7 +51,7 @@ export default createComponent({
       <div style={{ height: sticky ? `${this.height}px` : null }}>
         <div
           style={this.anchorStyle}
-          class={[bem({ sticky }), { 'van-hairline--bottom': sticky }]}
+          class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}
         >
           {this.slots('default') || this.index}
         </div>
diff --git a/src/index-bar/index.js b/src/index-bar/index.js
index 4b6ef10f8..b6954f830 100644
--- a/src/index-bar/index.js
+++ b/src/index-bar/index.js
@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
-import { GREEN } from '../utils/color';
+import { GREEN } from '../utils/constant';
 import {
   getScrollTop,
   getElementTop,
diff --git a/src/loading/index.tsx b/src/loading/index.tsx
index e7bec1e65..10b720fd6 100644
--- a/src/loading/index.tsx
+++ b/src/loading/index.tsx
@@ -1,5 +1,5 @@
 import { createNamespace, addUnit } from '../utils';
-import { GRAY } from '../utils/color';
+import { GRAY } from '../utils/constant';
 import { inherit } from '../utils/functional';
 
 // Types
diff --git a/src/nav-bar/index.tsx b/src/nav-bar/index.tsx
index 519c0d9df..e90e6df54 100644
--- a/src/nav-bar/index.tsx
+++ b/src/nav-bar/index.tsx
@@ -1,5 +1,6 @@
 import { createNamespace, noop } from '../utils';
 import { inherit } from '../utils/functional';
+import { BORDER_BOTTOM } from '../utils/constant';
 import Icon from '../icon';
 
 // Types
@@ -39,7 +40,7 @@ function NavBar(
     <div
       class={[
         bem({ fixed: props.fixed }),
-        { 'van-hairline--bottom': props.border }
+        { [BORDER_BOTTOM]: props.border }
       ]}
       style={{ zIndex: props.zIndex }}
       {...inherit(ctx)}
diff --git a/src/notify/Notify.tsx b/src/notify/Notify.tsx
index 7f55221a7..f6dc6d400 100644
--- a/src/notify/Notify.tsx
+++ b/src/notify/Notify.tsx
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED, WHITE } from '../utils/color';
+import { RED, WHITE } from '../utils/constant';
 import { inherit } from '../utils/functional';
 import { PopupMixin } from '../mixins/popup';
 import Popup from '../popup';
diff --git a/src/notify/index.ts b/src/notify/index.ts
index 8a80ccc59..242a6643e 100644
--- a/src/notify/index.ts
+++ b/src/notify/index.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VanNotify from './Notify';
-import { RED, WHITE } from '../utils/color';
+import { RED, WHITE } from '../utils/constant';
 import { isObj, isServer } from '../utils';
 import { mount } from '../utils/functional';
 import { NotifyOptions } from 'types/notify';
diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js
index 9b3769d94..588eb1ca2 100644
--- a/src/number-keyboard/Key.js
+++ b/src/number-keyboard/Key.js
@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('key');
 
@@ -54,7 +55,7 @@ export default createComponent({
       <i
         role="button"
         tabindex="0"
-        class={['van-hairline', this.className]}
+        class={[BORDER, this.className]}
         onClick={this.onClick}
         onTouchstart={this.onFocus}
         onTouchmove={onBlur}
diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js
index bb7bc3403..0dc5c389f 100644
--- a/src/number-keyboard/index.js
+++ b/src/number-keyboard/index.js
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { stopPropagation } from '../utils/dom/event';
+import { BORDER_TOP } from '../utils/constant';
 import { BindEventMixin } from '../mixins/bind-event';
 import Key from './Key';
 
@@ -137,7 +138,7 @@ export default createComponent({
     const showTitle = title || showTitleClose || titleLeftSlot;
 
     const Title = showTitle && (
-      <div class={[bem('title'), 'van-hairline--top']}>
+      <div class={[bem('title'), BORDER_TOP]}>
         {titleLeftSlot && <span class={bem('title-left')}>{titleLeftSlot}</span>}
         {title && <span>{title}</span>}
         {showTitleClose && (
diff --git a/src/pagination/index.js b/src/pagination/index.js
index 16bc6212a..feafb7baa 100644
--- a/src/pagination/index.js
+++ b/src/pagination/index.js
@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER } from '../utils/constant';
 
 const [createComponent, bem, t] = createNamespace('pagination');
 
@@ -125,14 +126,14 @@ export default createComponent({
     return (
       <ul class={bem({ simple })}>
         <li
-          class={[bem('item', { disabled: value === 1 }), bem('prev'), 'van-hairline']}
+          class={[bem('item', { disabled: value === 1 }), bem('prev'), BORDER]}
           onClick={onSelect(value - 1)}
         >
           {this.prevText || t('prev')}
         </li>
         {this.pages.map(page => (
           <li
-            class={[bem('item', { active: page.active }), bem('page'), 'van-hairline']}
+            class={[bem('item', { active: page.active }), bem('page'), BORDER]}
             onClick={onSelect(page.number)}
           >
             {page.text}
@@ -142,7 +143,7 @@ export default createComponent({
           <li class={bem('page-desc')}>{this.slots('pageDesc') || `${value}/${this.count}`}</li>
         )}
         <li
-          class={[bem('item', { disabled: value === this.count }), bem('next'), 'van-hairline']}
+          class={[bem('item', { disabled: value === this.count }), bem('next'), BORDER]}
           onClick={onSelect(value + 1)}
         >
           {this.nextText || t('next')}
diff --git a/src/panel/index.tsx b/src/panel/index.tsx
index a7d0da6e7..5a25b082f 100644
--- a/src/panel/index.tsx
+++ b/src/panel/index.tsx
@@ -1,7 +1,8 @@
 import { createNamespace } from '../utils';
+import { inherit } from '../utils/functional';
+import { BORDER_TOP } from '../utils/constant';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
-import { inherit } from '../utils/functional';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -42,7 +43,7 @@ function Panel(
     ),
     <div class={bem('content')}>{slots.default && slots.default()}</div>,
     slots.footer && (
-      <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer()}</div>
+      <div class={[bem('footer'), BORDER_TOP]}>{slots.footer()}</div>
     )
   ];
 
diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
index 2f10d9944..0bc8232fb 100644
--- a/src/password-input/index.tsx
+++ b/src/password-input/index.tsx
@@ -1,5 +1,6 @@
 import { createNamespace, addUnit } from '../utils';
 import { emit, inherit } from '../utils/functional';
+import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -35,7 +36,7 @@ function PasswordInput(
     }
 
     Points.push(
-      <li class={{ 'van-hairline--left': showBorder }} style={style}>
+      <li class={{ [BORDER_LEFT]: showBorder }} style={style}>
         {props.mask ? <i style={{ visibility: char ? 'visible' : 'hidden' }} /> : char}
       </li>
     );
@@ -44,7 +45,7 @@ function PasswordInput(
   return (
     <div class={bem()}>
       <ul
-        class={[bem('security'), { 'van-hairline--surround': !props.gutter }]}
+        class={[bem('security'), { [BORDER_SURROUND]: !props.gutter }]}
         onTouchstart={(event: TouchEvent) => {
           event.stopPropagation();
           emit(ctx, 'focus', event);
diff --git a/src/picker/index.js b/src/picker/index.js
index c7452cdc7..6f25c7a3d 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 import { deepClone } from '../utils/deep-clone';
 import { pickerProps } from './shared';
-import { BLUE } from '../utils/color';
+import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
 
@@ -163,7 +163,7 @@ export default createComponent({
     };
 
     const Toolbar = this.showToolbar && (
-      <div class={['van-hairline--top-bottom', bem('toolbar')]}>
+      <div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
         {this.slots() || [
           <div role="button" tabindex="0" class={bem('cancel')} onClick={this.onCancel}>
             {this.cancelButtonText || t('cancel')}
@@ -198,7 +198,7 @@ export default createComponent({
             />
           ))}
           <div class={bem('mask')} style={maskStyle} />
-          <div class={['van-hairline--top-bottom', bem('frame')]} style={frameStyle} />
+          <div class={[BORDER_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
         </div>
         {this.toolbarPosition === 'bottom' ? Toolbar : h()}
       </div>
diff --git a/src/progress/index.js b/src/progress/index.js
index 1ad7e23e3..085168a83 100644
--- a/src/progress/index.js
+++ b/src/progress/index.js
@@ -1,5 +1,5 @@
 import { createNamespace, isDef } from '../utils';
-import { BLUE, WHITE } from '../utils/color';
+import { BLUE, WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('progress');
 
diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 6d310e4fd..596cbc302 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -1,7 +1,8 @@
 import { createNamespace } from '../utils';
-import Info from '../info';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
+import { BORDER } from '../utils/constant';
+import Info from '../info';
 
 const [createComponent, bem] = createNamespace('sidebar-item');
 
@@ -32,7 +33,7 @@ export default createComponent({
   render() {
     return (
       <a
-        class={[bem({ select: this.select }), 'van-hairline']}
+        class={[bem({ select: this.select }), BORDER]}
         onClick={this.onClick}
       >
         <div class={bem('text')}>
diff --git a/src/sidebar/index.js b/src/sidebar/index.js
index cdd35a5da..89a80fcdd 100644
--- a/src/sidebar/index.js
+++ b/src/sidebar/index.js
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('sidebar');
 
@@ -18,6 +19,6 @@ export default createComponent({
   },
 
   render() {
-    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
+    return <div class={[bem(), BORDER_TOP_BOTTOM]}>{this.slots()}</div>;
   }
 });
diff --git a/src/sku/components/SkuHeader.tsx b/src/sku/components/SkuHeader.tsx
index 1638b9f02..5f6ac9c81 100644
--- a/src/sku/components/SkuHeader.tsx
+++ b/src/sku/components/SkuHeader.tsx
@@ -1,5 +1,6 @@
 import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
+import { BORDER_BOTTOM } from '../../utils/constant';
 import Icon from '../../icon';
 
 // Types
@@ -45,7 +46,7 @@ function SkuHeader(
   };
 
   return (
-    <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}>
+    <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
       <div class={bem('img-wrap')} onClick={previewImage}>
         <img src={goodsImg} />
       </div>
diff --git a/src/sku/components/SkuRow.tsx b/src/sku/components/SkuRow.tsx
index de3ee2983..9c869c420 100644
--- a/src/sku/components/SkuRow.tsx
+++ b/src/sku/components/SkuRow.tsx
@@ -1,5 +1,6 @@
 import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
+import { BORDER_BOTTOM } from '../../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -19,7 +20,7 @@ function SkuRow(
   ctx: RenderContext<SkuRowProps>
 ) {
   return (
-    <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}>
+    <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
       <div class={bem('title')}>{props.skuRow.k}</div>
       {slots.default && slots.default()}
     </div>
diff --git a/src/step/index.js b/src/step/index.js
index 3b6505d6e..dcb83f8f3 100644
--- a/src/step/index.js
+++ b/src/step/index.js
@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER } from '../utils/constant';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('step');
@@ -54,7 +55,7 @@ export default createComponent({
     }
 
     return (
-      <div class={['van-hairline', bem([direction, { [status]: status }])]}>
+      <div class={[BORDER, bem([direction, { [status]: status }])]}>
         <div class={bem('title')} style={titleStyle}>
           {this.slots()}
         </div>
diff --git a/src/steps/index.js b/src/steps/index.js
index 1946d59d0..960bd43e7 100644
--- a/src/steps/index.js
+++ b/src/steps/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { GREEN } from '../utils/color';
+import { GREEN } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('steps');
 
diff --git a/src/switch/index.tsx b/src/switch/index.tsx
index 1ee5bd0a5..ec109ab3c 100644
--- a/src/switch/index.tsx
+++ b/src/switch/index.tsx
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { BLUE, GRAY_DARK } from '../utils/color';
+import { BLUE, GRAY_DARK } from '../utils/constant';
 import { switchProps, SharedSwitchProps } from './shared';
 import { emit, inherit } from '../utils/functional';
 import Loading from '../loading';
diff --git a/src/tabbar/index.js b/src/tabbar/index.js
index c2c8d310a..1b39dcb65 100644
--- a/src/tabbar/index.js
+++ b/src/tabbar/index.js
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('tabbar');
 
@@ -54,7 +55,7 @@ export default createComponent({
       <div
         style={{ zIndex: this.zIndex }}
         class={[
-          { 'van-hairline--top-bottom': this.border },
+          { [BORDER_TOP_BOTTOM]: this.border },
           bem({
             fixed: this.fixed,
             'safe-area-inset-bottom': this.safeAreaInsetBottom
diff --git a/src/tabs/index.js b/src/tabs/index.js
index 6e52028da..416363ab9 100644
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@@ -3,6 +3,7 @@ import { scrollLeftTo } from './utils';
 import { isHidden } from '../utils/dom/style';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { setRootScrollTop, getElementTop } from '../utils/dom/scroll';
 import Title from './Title';
 import Content from './Content';
@@ -282,7 +283,7 @@ export default createComponent({
         ref="wrap"
         class={[
           bem('wrap', { scrollable }),
-          { 'van-hairline--top-bottom': type === 'line' && this.border }
+          { [BORDER_TOP_BOTTOM]: type === 'line' && this.border }
         ]}
       >
         <div ref="nav" role="tablist" class={bem('nav', [type])} style={this.navStyle}>
diff --git a/src/tag/index.tsx b/src/tag/index.tsx
index aaa13ad9f..35246ed69 100644
--- a/src/tag/index.tsx
+++ b/src/tag/index.tsx
@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
+import { BORDER_SURROUND } from '../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -46,9 +47,7 @@ function Tag(
       style={style}
       class={[
         bem([classes, type]),
-        {
-          'van-hairline--surround': plain
-        }
+        { [BORDER_SURROUND]: plain }
       ]}
       {...inherit(ctx, true)}
     >
diff --git a/src/utils/color.ts b/src/utils/color.ts
deleted file mode 100644
index a3705bab9..000000000
--- a/src/utils/color.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const RED = '#f44';
-export const BLUE = '#1989fa';
-export const GREEN = '#07c160';
-export const WHITE = '#fff';
-export const GRAY = '#c9c9c9';
-export const GRAY_DARK = '#969799';
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
new file mode 100644
index 000000000..f51b1e472
--- /dev/null
+++ b/src/utils/constant.ts
@@ -0,0 +1,16 @@
+// color
+export const RED = '#f44';
+export const BLUE = '#1989fa';
+export const GREEN = '#07c160';
+export const WHITE = '#fff';
+export const GRAY = '#c9c9c9';
+export const GRAY_DARK = '#969799';
+
+// border
+export const BORDER = 'van-hairline';
+export const BORDER_TOP = `${BORDER}--top`;
+export const BORDER_LEFT = `${BORDER}--left`;
+export const BORDER_RIGHT = `${BORDER}--right`;
+export const BORDER_BOTTOM = `${BORDER}--bottom`;
+export const BORDER_SURROUND = `${BORDER}--surround`;
+export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;