feat(Tabbar & Tag): support css variables @rex-zsd (#2240)

example/pages/tag/index.js

@@ -1,3 +1,16 @@
 import Page from '../../common/page';
 
-Page();
+Page({
+  data: {
+    show: {
+      success: true,
+      primary: true
+    }
+  },
+
+  onClose(event) {
+    this.setData({
+      [`show.${event.target.id}`]: false
+    });
+  }
+});

example/pages/tag/index.wxml

@@ -6,14 +6,6 @@
   <van-tag class="demo-margin-right" type="warning">标签</van-tag>
 </demo-block>
 
-<demo-block title="空心样式" padding>
-  <van-tag class="demo-margin-right" plain>标签</van-tag>
-  <van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
-  <van-tag class="demo-margin-right" plain type="success">标签</van-tag>
-  <van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
-  <van-tag class="demo-margin-right" plain type="warning">标签</van-tag>
-</demo-block>
-
 <demo-block title="圆角样式" padding>
   <van-tag class="demo-margin-right" round>标签</van-tag>
   <van-tag class="demo-margin-right" round type="primary">标签</van-tag>
@@ -30,12 +22,22 @@
   <van-tag class="demo-margin-right" mark type="warning">标签</van-tag>
 </demo-block>
 
+<demo-block title="空心样式" padding>
+  <van-tag class="demo-margin-right" plain>标签</van-tag>
+  <van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
+  <van-tag class="demo-margin-right" plain type="success">标签</van-tag>
+  <van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
+  <van-tag class="demo-margin-right" plain type="warning">标签</van-tag>
+</demo-block>
+
 <demo-block title="自定义颜色" padding>
   <van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
   <van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
   <van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
   <van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
-  <van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000">标签</van-tag>
+  <van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000"
+    >标签</van-tag
+  >
 </demo-block>
 
 <demo-block title="标签大小" padding>
@@ -43,3 +45,26 @@
   <van-tag class="demo-margin-right" type="danger" size="medium">标签</van-tag>
   <van-tag class="demo-margin-right" type="danger" size="large">标签</van-tag>
 </demo-block>
+
+<demo-block title="可关闭标签" padding>
+  <van-tag
+    wx:if="{{ show.primary }}"
+    class="demo-margin-right"
+    type="primary"
+    size="medium"
+    closeable
+    id="primary"
+    bind:close="onClose"
+    >标签</van-tag
+  >
+  <van-tag
+    wx:if="{{ show.success }}"
+    class="demo-margin-right"
+    type="success"
+    size="medium"
+    closeable
+    id="success"
+    bind:close="onClose"
+    >标签</van-tag
+  >
+</demo-block>

packages/common/style/var.less

@@ -322,7 +322,26 @@
 @submit-bar-tip-background-color: #fff7cc;
 @submit-bar-tip-icon-size: 12px;
 
+// Tabbar
+@tabbar-height: 50px;
+@tabbar-background-color: @white;
+
+// TabbarItem
+@tabbar-item-font-size: @font-size-sm;
+@tabbar-item-text-color: @gray-darker;
+@tabbar-item-active-color: @blue;
+@tabbar-item-line-height: 1;
+@tabbar-item-icon-size: 18px;
+@tabbar-item-margin-bottom: 5px;
+
 // Tag
+@tag-padding: .2em .5em;
+@tag-font-size: @font-size-xs;
+@tag-medium-font-size: @font-size-sm;
+@tag-large-font-size: @font-size-md;
+@tag-text-color: @white;
+@tag-border-radius: .2em;
+@tag-round-border-radius: @border-radius-max;
 @tag-dander-color: @red;
 @tag-primary-color: @blue;
 @tag-success-color: @green;

packages/tabbar-item/index.less

@@ -11,30 +11,26 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  font-size: 12px;
+  .theme(color, '@tabbar-item-text-color');
-  line-height: 1;
+  .theme(font-size, '@tabbar-item-font-size');
-  .theme(color, '@gray-darker');
+  .theme(line-height, '@tabbar-item-line-height');
 
   &__icon {
     position: relative;
-    margin-bottom: 5px;
+    .theme(margin-bottom, '@tabbar-item-margin-bottom');
-    font-size: 18px;
+    .theme(font-size, '@tabbar-item-icon-size');
 
-    &--dot {
+    &__inner {
-      &::after {
+      display: block;
-        position: absolute;
+      min-width: 1em;
-        top: 0;
-        right: -8px;
-        width: 8px;
-        height: 8px;
-        border-radius: 100%;
-        content: ' ';
-        .theme(background-color, '@red');
-      }
     }
   }
 
   &--active {
-    .theme(color, '@blue');
+    .theme(color, '@tabbar-item-active-color');
+  }
+
+  &__info {
+    margin-top: 2px;
   }
 }

packages/tabbar-item/index.wxml

@@ -5,11 +5,11 @@
   style="color: {{ active ? activeColor : inactiveColor }}"
   bind:tap="onClick"
 >
-  <view class="{{ utils.bem('tabbar-item__icon', { dot }) }}">
+  <view class="van-tabbar-item__icon">
     <van-icon
       wx:if="{{ icon }}"
       name="{{ icon }}"
-      customStyle="display: block"
+      custom-class="van-tabbar-item__icon__inner"
     />
     <block wx:else>
       <slot
@@ -19,9 +19,9 @@
       <slot wx:else name="icon" />
     </block>
     <van-info
-      wx:if="{{ info !== null }}"
+      dot="{{ dot }}"
       info="{{ info }}"
-      custom-style="margin-top: 2px"
+      custom-class="van-tabbar-item__info"
     />
   </view>
   <view class="van-tabbar-item__text">

packages/tabbar/index.less

@@ -4,8 +4,8 @@
 .van-tabbar {
   display: flex;
   width: 100%;
-  height: 50px;
+  .theme(height, '@tabbar-height');
-  .theme(background-color, '@white');
+  .theme(background-color, '@tabbar-background-color');
 
   &--fixed {
     position: fixed;

packages/tag/index.less

@@ -2,16 +2,17 @@
 @import '../common/style/theme.less';
 
 .van-tag {
-  display: inline-block;
+  display: inline-flex;
-  padding: 0.2em 0.5em;
+  align-items: center;
-  font-size: 10px;
   line-height: normal;
-  border-radius: 0.2em;
+  .theme(padding, '@tag-padding');
-  .theme(color, '@white');
+  .theme(color, '@tag-text-color');
+  .theme(font-size, '@tag-font-size');
+  .theme(border-radius, '@tag-border-radius');
 
   &::after {
     border-color: currentColor;
-    border-radius: 0.4em;
+    .theme(border-radius, '@tag-border-radius * 2');
   }
 
   &--default {
@@ -59,27 +60,33 @@
   }
 
   &--mark {
-    padding-right: 0.6em;
+    padding-right: 0.7em;
-    border-radius: 0 0.8em 0.8em 0;
 
+    &,
     &::after {
-      border-radius: 0 1.6em 1.6em 0;
+      .theme(
+        border-radius,
+        '0 @tag-round-border-radius @tag-round-border-radius 0'
+      );
     }
   }
 
   &--round {
-    border-radius: 0.8em;
+    &,
-
     &::after {
-      border-radius: 1.6em;
+      .theme(border-radius, '@tag-round-border-radius');
     }
   }
 
   &--medium {
-    font-size: 12px;
+    .theme(font-size, '@tag-medium-font-size');
   }
 
   &--large {
-    font-size: 14px;
+    .theme(font-size, '@tag-large-font-size');
+  }
+
+  &__close {
+    margin-left: 2px;
   }
 }

packages/tag/index.ts

@@ -11,6 +11,13 @@ VantComponent({
     type: {
       type: String,
       value: 'default'
+    },
+    closeable: Boolean
+  },
+
+  methods: {
+    onClose() {
+      this.$emit('close');
     }
   }
 });

packages/tag/index.wxml

@@ -5,4 +5,10 @@
   style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
 >
   <slot />
+  <van-icon
+    wx:if="{{ closeable }}"
+    name="cross"
+    custom-class="van-tag__close"
+    bind:click="onClose"
+  />
 </view>