feat(Tag): remove computed (#1999)

docs/markdown/changelog.md

@@ -2,6 +2,12 @@
 
 ### [v1.0.0-beta.0](https://github.com/youzan/vant-weapp/tree/v1.0.0-beta.0)
 
+#### 新组件
+
+- 新增`Circle`环形进度条组件
+- 新增`Overlay`遮罩层组件
+- 新增`Sticky`粘性布局组件
+
 #### 不兼容更新
 
 ##### Badge
@@ -25,6 +31,11 @@
 
 #### 新特性
 
+##### ActionSheet
+
+- 新增`click-overlay`事件
+- 新增`close-on-click-action`属性
+
 ##### Area
 
 - `reset`方法支持传入`code`参数
@@ -47,12 +58,31 @@
 - 新增`clickable`属性
 - 新增`arrow-direction`属性
 
+##### Icon
+
+- 支持`number`类型的`size`属性
+
+##### Loading
+
+- 支持`number`类型的`size`属性
+
+##### Rate
+
+- 新增`gutter`属性
+- 支持`string`类型的`size`属性
+
 ##### Popup
 
 - 新增`round`属性
 - 新增`closeable`属性
 - 新增`close-icon`属性
 
+##### Slider
+
+- 支持传入任意范围的`max`和`min`属性
+- 支持`number`类型的`bar-height`属性
+
 ##### Steps
 
 - 新增`active-icon`属性
+- 新增`inactive-icon`属性

packages/common/style/var.less

@@ -53,16 +53,8 @@
 @checkbox-disabled-label-color: @gray;
 @checkbox-disabled-background-color: @border-color;
 
-// Radio
-@radio-size: 20px;
-@radio-border-color: @gray-light;
-@radio-transition-duration: .2s;
-@radio-label-margin: 10px;
-@radio-label-color: @text-color;
-@radio-checked-icon-color: @blue;
-@radio-disabled-icon-color: @gray;
-@radio-disabled-label-color: @gray;
-@radio-disabled-background-color: @border-color;
+// Circle
+@circle-text-color: @text-color;
 
 // Collapse
 @collapse-item-transition-duration: .3s;
@@ -83,6 +75,9 @@
 @info-background-color: @red;
 @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
 
+// NavBar
+@nav-bar-height: 44px;
+
 // Notify
 @notify-padding: 6px 15px;
 @notify-font-size: 14px;
@@ -98,6 +93,20 @@
 @popup-close-icon-margin: 16px;
 @popup-close-icon-z-index: 1;
 
+// Radio
+@radio-size: 20px;
+@radio-border-color: @gray-light;
+@radio-transition-duration: .2s;
+@radio-label-margin: 10px;
+@radio-label-color: @text-color;
+@radio-checked-icon-color: @blue;
+@radio-disabled-icon-color: @gray;
+@radio-disabled-label-color: @gray;
+@radio-disabled-background-color: @border-color;
+
+// Rate
+@rate-horizontal-padding: 2px;
+
 // Switch
 @switch-width: 2em;
 @switch-height: 1em;
@@ -111,23 +120,6 @@
 @switch-disabled-opacity: .4;
 @switch-border: 1px solid rgba(0, 0, 0, .1);
 
-// Toast
-@toast-max-width: 70%;
-@toast-font-size: 14px;
-@toast-text-color: @white;
-@toast-line-height: 20px;
-@toast-border-radius: 4px;
-@toast-background-color: rgba(@text-color, .88);
-@toast-icon-size: 48px;
-@toast-text-min-width: 96px;
-@toast-text-padding: 8px 12px;
-@toast-default-padding: 15px;
-@toast-default-width: 90px;
-@toast-default-min-height: 90px;
-
-// iPhoneX
-@safe-area-inset-bottom: 34px;
-
 // Search
 @search-background-color: #f7f8fA;
 
@@ -155,11 +147,27 @@
 @submit-bar-tip-background-color: #fff7cc;
 @submit-bar-tip-icon-size: 12px;
 
-// NavBar
-@nav-bar-height: 44px;
+// Tag
+@tag-dander-color: @red;
+@tag-primary-color: @blue;
+@tag-success-color: @green;
+@tag-warning-color: @orange;
+@tag-default-color: @gray-dark;
+@tag-plain-background-color: @white;
 
-// Rate
-@rate-horizontal-padding: 2px;
+// Toast
+@toast-max-width: 70%;
+@toast-font-size: 14px;
+@toast-text-color: @white;
+@toast-line-height: 20px;
+@toast-border-radius: 4px;
+@toast-background-color: rgba(@text-color, .88);
+@toast-icon-size: 48px;
+@toast-text-min-width: 96px;
+@toast-text-padding: 8px 12px;
+@toast-default-padding: 15px;
+@toast-default-width: 90px;
+@toast-default-min-height: 90px;
 
-// Circle
-@circle-text-color: @text-color;
+// iPhoneX
+@safe-area-inset-bottom: 34px;

packages/tag/index.less

@@ -13,6 +13,50 @@
     border-radius: .4em;
   }
 
+  &--default {
+    background-color: @tag-default-color;
+
+    &.van-tag--plain {
+      color: @tag-default-color;
+    }
+  }
+
+  &--danger {
+    background-color: @tag-dander-color;
+
+    &.van-tag--plain {
+      color: @tag-dander-color;
+    }
+  }
+
+  &--primary {
+    background-color: @tag-primary-color;
+
+    &.van-tag--plain {
+      color: @tag-primary-color;
+    }
+  }
+
+  &--success {
+    background-color: @tag-success-color;
+
+    &.van-tag--plain {
+      color: @tag-success-color;
+    }
+  }
+
+  &--warning {
+    background-color: @tag-warning-color;
+
+    &.van-tag--plain {
+      color: @tag-warning-color;
+    }
+  }
+
+  &--plain {
+    background-color: @tag-plain-background-color;
+  }
+
   &--mark {
     padding-right: .6em;
     border-radius: 0 .8em .8em 0;

packages/tag/index.ts

@@ -1,40 +1,16 @@
 import { VantComponent } from '../common/component';
-import { RED, BLUE, GREEN, ORANGE } from '../common/color';
-
-const DEFAULT_COLOR = '#999';
-const COLOR_MAP = {
-  danger: RED,
-  primary: BLUE,
-  success: GREEN,
-  warning: ORANGE
-};
-
-type Style = {
-  [key: string]: string;
-};
 
 VantComponent({
   props: {
     size: String,
-    type: String,
     mark: Boolean,
     color: String,
     plain: Boolean,
     round: Boolean,
-    textColor: String
-  },
-
-  computed: {
-    style() {
-      const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
-      const key = this.data.plain ? 'color' : 'background-color';
-      const style = { [key]: color } as Style;
-
-      if (this.data.textColor) {
-        style.color = this.data.textColor;
-      }
-
-      return Object.keys(style).map(key => `${key}: ${style[key]}`).join(';');
+    textColor: String,
+    type: {
+      type: String,
+      value: 'default'
     }
   }
 });

packages/tag/index.wxml

@@ -1,8 +1,8 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  class="custom-class {{ utils.bem('tag', [size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}"
-  style="{{ style }}"
+  class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}"
+  style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
 >
   <slot />
 </view>