From 1f645422cac5684a54b341b6ff2cf07a78ac8d2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 31 Aug 2017 10:50:14 +0800
Subject: [PATCH] Tag: update document

---
 docs/examples-docs/tag.md | 73 +++++++++++++++++++--------------------
 packages/tag/index.vue    | 26 +++++++-------
 2 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index 4d21b6ba6..63491187f 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -1,10 +1,14 @@
 <style>
-.tags-container {
-  padding: 5px 15px;
-
+.demo-tag {
   .van-tag + .van-tag {
     margin-left: 10px;
   }
+
+  .van-tag {
+    &:first-of-type {
+      margin-left: 15px;
+    }
+  }
 }
 </style>
 
@@ -20,44 +24,37 @@ Vue.component(Tag.name, Tag);
 ### 代码演示
 
 #### 基础用法
-
-`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
-
+通过 type 属性控制 Tag 颜色，默认为灰色
 :::demo 基础用法
 ```html
-<div class="tags-container">
-  <van-tag>返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="danger">返现</van-tag>
-  <van-tag type="success">四字标签</van-tag>
-  <van-tag type="primary">一</van-tag>
-</div>
+<van-tag>标签</van-tag>
+<van-tag type="danger">标签</van-tag>
+<van-tag type="success">标签</van-tag>
+<van-tag type="primary">标签</van-tag>
 ```
 :::
 
-#### 高级用法
+#### 空心样式
+设置`plain`属性设置为空心样式
 
-设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
-
-:::demo 高级用法
+:::demo 空心样式
 ```html
-<div class="tags-container">
-  <van-tag>返现</van-tag>
-  <van-tag plain>返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="danger">返现</van-tag>
-  <van-tag plain type="danger">返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="primary">返现</van-tag>
-  <van-tag plain type="primary">返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="success">返现</van-tag>
-  <van-tag plain type="success">返现</van-tag>
-</div>
+<van-tag plain>标签</van-tag>
+<van-tag plain type="danger">标签</van-tag>
+<van-tag plain type="primary">标签</van-tag>
+<van-tag plain type="success">标签</van-tag>
+```
+:::
+
+#### 标记样式
+通过`mark`设置为标记样式
+
+:::demo 标记样式
+```html
+<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>
 ```
 :::
 
@@ -65,12 +62,12 @@ Vue.component(Tag.name, Tag);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| plain | 是否是空心tag | `boolean`  | `false`          |           |
-| mark | 是否是标记 | `boolean`  | `false`          |           |
-| type | tag类型 | `string`  | `''`          | `primary`, `success`, `danger` |
+| type | 类型 | `String`  | `''`| `primary` `success` `danger` |
+| plain | 是否为空心样式 | `Boolean` | `false` | |
+| mark | 是否为标记样式 | `Boolean` | `false` | |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
-| - | 自定义tag显示内容 |
+| - | 自定义 Tag 显示内容 |
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index e24bf0990..4fd9ad45d 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -1,21 +1,21 @@
 <template>
-  <span class="van-tag" :class="[type ? `van-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
+  <span :class="['van-tag', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]">
     <slot></slot>
   </span>
 </template>
 
 <script>
-  const ALLOW_TYPE = ['danger', 'success', 'primary'];
+const ALLOW_TYPE = ['danger', 'success', 'primary'];
 
-  export default {
-    name: 'van-tag',
-    props: {
-      type: {
-        type: String,
-        validator: val => ~ALLOW_TYPE.indexOf(val)
-      },
-      mark: Boolean,
-      plain: Boolean
-    }
-  };
+export default {
+  name: 'van-tag',
+  props: {
+    type: {
+      type: String,
+      validator: val => ~ALLOW_TYPE.indexOf(val)
+    },
+    mark: Boolean,
+    plain: Boolean
+  }
+};
 </script>