[breaking change] Tag: rewrite

example/pages/tag/index.js

@@ -1,11 +1 @@
-Page({
+Page({});
-  data: {
-  },
-
-  onLoad: function () {
-
-  },
-
-  onShow: function() {
-  },
-})

example/pages/tag/index.json

@@ -1,8 +1,7 @@
 {
   "navigationBarTitleText": "Tag 标记",
   "usingComponents": {
-    "van-cell": "../../dist/cell/index",
+    "demo-block": "../../components/demo-block/index",
-    "van-panel": "../../dist/panel/index",
     "van-tag": "../../dist/tag/index"
   }
 }

example/pages/tag/index.wxml

@@ -1,26 +1,20 @@
-<van-panel title="基础用法" class="tag-demo">
+<demo-block title="基础用法" padding>
-  <van-cell>
+  <van-tag custom-class="demo-margin-right">标签</van-tag>
-    <van-tag>灰色</van-tag>
+  <van-tag custom-class="demo-margin-right" type="danger">标签</van-tag>
-    <van-tag type="danger">红色</van-tag>
+  <van-tag custom-class="demo-margin-right" type="success">标签</van-tag>
-    <van-tag disabled>不可用</van-tag>
+  <van-tag type="primary">标签</van-tag>
-  </van-cell>
+</demo-block>
-</van-panel>
 
-<van-panel title="各种不同类型" class="tag-demo">
+<demo-block title="空心样式" padding>
-  <van-cell>
+  <van-tag custom-class="demo-margin-right" plain>标签</van-tag>
-    <van-tag type="danger">会员折扣</van-tag>
+  <van-tag custom-class="demo-margin-right" plain type="danger">标签</van-tag>
-    <van-tag type="warn">返现</van-tag>
+  <van-tag custom-class="demo-margin-right" plain type="primary">标签</van-tag>
-    <van-tag type="primary">返现</van-tag>
+  <van-tag plain type="success">标签</van-tag>
-    <van-tag type="primary" disabled>不可用</van-tag>
+</demo-block>
-  </van-cell>
-</van-panel>
 
-<van-panel title="镂空 Tag" class="tag-demo">
+<demo-block title="圆角样式" padding>
-  <van-cell>
+  <van-tag custom-class="demo-margin-right" mark>标签</van-tag>
-    <van-tag plain>灰色</van-tag>
+  <van-tag custom-class="demo-margin-right" mark type="danger">标签</van-tag>
-    <van-tag type="danger" plain>会员折扣</van-tag>
+  <van-tag custom-class="demo-margin-right" mark type="primary">标签</van-tag>
-    <van-tag type="warn" plain>返现</van-tag>
+  <van-tag mark type="success">标签</van-tag>
-    <van-tag type="primary" plain>返现</van-tag>
+</demo-block>
-    <van-tag type="primary" plain disabled>返现不可用</van-tag>
-  </van-cell>
-</van-panel>

example/pages/tag/index.wxss

@@ -1,8 +0,0 @@
-.tag-demo {
-  display: block;
-  margin: 15px 0;
-}
-
-van-tag + van-tag {
-  margin-left: 10px;
-}

packages/tag/README.md

@@ -1,7 +1,8 @@
 ## Tag 标签
 
 ### 使用指南
-在 json 文件中配置tag组件
+
+在 index.json 中引入组件
 ```json
 "usingComponents": {
   "van-tag": "path/to/vant-weapp/dist/tag/index"
@@ -11,41 +12,51 @@
 ### 代码演示
 
 #### 基础用法
+通过 type 属性控制 Tag 颜色，默认为灰色
+
 ```html
-<van-tag>取消订单</van-tag>
+<van-tag>标签</van-tag>
+<van-tag type="danger">标签</van-tag>
+<van-tag type="success">标签</van-tag>
+<van-tag type="primary">标签</van-tag>
 ```
 
-#### 类型
+#### 空心样式
-tag支持额外的三种类型 primary, danger, warn
+设置`plain`属性设置为空心样式
+
 ```html
-<van-tag type="primary">会员折扣</van-tag>
+<van-tag plain>标签</van-tag>
-<van-tag type="danger">返现</van-tag>
+<van-tag plain type="danger">标签</van-tag>
-<van-tag type="warn">返现</van-tag>
+<van-tag plain type="primary">标签</van-tag>
+<van-tag plain type="success">标签</van-tag>
 ```
 
+#### 圆角样式
+通过`mark`设置为圆角样式
 
-#### 其他
-tag镂空状态
 ```html
-<van-tag plain>返现</van-tag>
+<van-tag mark>标签</van-tag>
+<van-tag mark type="danger">标签</van-tag>
+<van-tag mark type="primary">标签</van-tag>
+<van-tag mark type="success">标签</van-tag>
 ```
 
-tag禁用状态
-```html
-<van-tag disabled>不可用</van-tag>
-```
-
-
 ### API
 
-| 名称     | 类型    | 是否必须  | 默认  | 描述   |
+| 参数 | 说明 | 类型 | 默认值 |
-|---------|---------|----------|------|-------|
+|-----------|-----------|-----------|-------------|
-| type    | String  | 否       | 空 | tag类型，值有primary、warn、danger |
+| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
-| plain   | Boolean | 否       | false | tag是否镂空，默认为false |
+| plain | 是否为空心样式 | `Boolean` | `false` |
-| disabled | Boolean | 否      | false | tag是否禁用，默认为false |
+| mark | 是否为圆角样式 | `Boolean` | `false` |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| default | 自定义 Tag 显示内容 |
 
 ### 外部样式类
-| 类名       | 说明      |
+
+| 类名 | 说明 |
 |-----------|-----------|
-| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
+| custom-class | 根节点样式类 |
-| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |

packages/tag/index.js

@@ -1,17 +1,9 @@
 Component({
-  externalClasses: ['custom-class', 'theme-class'],
+  externalClasses: ['custom-class'],
 
   properties: {
-    type: {
+    type: String,
-      type: String,
+    mark: Boolean,
-    },
+    plain: Boolean
-    plain: {
-      type: Boolean,
-      value: false,
-    },
-    disabled: {
-      type: Boolean,
-      value: false,
-    }
   }
 });

packages/tag/index.pcss

@@ -1,83 +1,54 @@
-@import '../common/_var';
+@import '../helper/index.pcss';
-@import "../common/_mixins";
 
 .van-tag {
   display: inline-block;
-  position: relative;
+  padding: 2px 5px;
-  box-sizing: border-box;
+  line-height: normal;
-  line-height: 16px;
+  border-radius: 3px;
-  padding: 0 5px;
+  font-size: 10px;
-  border-radius: 2px;
-  font-size: 11px;
   background: $gray;
-  text-align: center;
   color: $white;
 
   &::after {
-    @mixin hairline;
+    border-color: currentColor;
-    border-width: 1px;
     border-radius: 4px;
   }
-}
 
-.van-tag--plain {
+  &--mark {
-  color: $gray;
+    padding-right: 7px;
-  background: $white;
+    border-radius: 0 8px 8px 0;
-}
 
-/* 各种主题代码 */
+    &::after {
-.van-tag--primary {
+      border-radius: 0 16px 16px 0;
-  color: $button-primary-color;
+    }
-  background-color: $button-primary-background-color;
-
-  &::after {
-    border-color: $button-primary-background-color;
   }
 
-  /* 空心形式 */
+  &--success {
-  &.van-tag--plain {
+    background: $green;
-    color: $button-primary-background-color;
+
+    &.van-tag--plain {
+      color: $green;
+    }
+  }
+
+  &--danger {
+    background: $button-danger-background-color;
+
+    &.van-tag--plain {
+      color: $button-danger-background-color;
+    }
+  }
+
+  &--primary {
+    background: $blue;
+
+    &.van-tag--plain {
+      color: $blue;
+    }
+  }
+
+  &--plain {
     background: $white;
-  }
+    color: $gray;
-}
-
-.van-tag--danger {
-  color: $button-danger-color;
-  background: $button-danger-background-color;
-
-  &::after {
-    border-color: $button-danger-background-color;
-  }
-
-  /* 空心形式 */
-  &.van-tag--plain {
-    color: $button-danger-background-color;
-    background: $button-danger-color;
-  }
-}
-
-.van-tag--warn {
-  color: $white;
-  background: #f85;
-
-  &::after {
-    border-color: #f85;
-  }
-
-  /* 空心形式 */
-  &.van-tag--plain {
-    color: #f85;
-    background: $white;
-  }
-}
-
-
-/* disabled tag */
-.van-tag--disabled {
-  color: $button-disabled-color !important;
-  background: $button-disabled-background-color;
-
-  &::after {
-    border-color: $button-disabled-border-color;
   }
 }

packages/tag/index.wxml

@@ -1,6 +1,5 @@
-
+<view
-<view 
+  class="van-hairline--surround van-tag custom-class {{ mark ? 'van-tag--mark' : '' }} {{ plain ? 'van-tag--plain' : '' }} {{ type ? 'van-tag--' + type : '' }}"
-  class="custom-class theme-class van-tag {{type ? 'van-tag--'+type : ''}} {{disabled ? 'van-tag--disabled' : ''}} {{plain ? 'van-tag--plain' : ''}}"
 >
-  <slot></slot>
+  <slot />
-</view>
+</view>