diff --git a/packages/tag/demo/index.vue b/packages/tag/demo/index.vue
index afdc6534f..59e3730ac 100644
--- a/packages/tag/demo/index.vue
+++ b/packages/tag/demo/index.vue
@@ -34,6 +34,12 @@
{{ $t('tag') }}
{{ $t('tag') }}
+
+
+ {{ $t('tag') }}
+ {{ $t('tag') }}
+ {{ $t('tag') }}
+
@@ -44,13 +50,15 @@ export default {
plain: '空心样式',
round: '圆角样式',
mark: '标记样式',
- customColor: '自定义颜色'
+ customColor: '自定义颜色',
+ customSize: '标签大小'
},
'en-US': {
plain: 'Plain style',
round: 'Round style',
mark: 'Mark style',
- customColor: 'Custom Color'
+ customColor: 'Custom Color',
+ customSize: 'Custom Size'
}
}
};
diff --git a/packages/tag/en-US.md b/packages/tag/en-US.md
index 9f396abf6..2c5c83e57 100644
--- a/packages/tag/en-US.md
+++ b/packages/tag/en-US.md
@@ -54,11 +54,21 @@ Vue.use(Tag);
Tag
```
+#### Custom Size
+
+```html
+Tag
+Tag
+Tag
+```
+
### API
| Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------|
-| type | Type, can be set to `primary` `success` `danger` | `String` | `''`|
+| type | Type, can be set to `primary` `success` `danger` | `String` | - |
+| size | Size, can be set to `large` `medium` | `String` | - |
+| color | Custom color | `String` | - |
| plain | Whether to be plain style | `Boolean` | `false` |
| round | Whether to be round style | `Boolean` | `false` |
| mark | Wtether to be mark style | `Boolean` | `false` |
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index 9e0f7e274..ad16c8235 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -3,7 +3,8 @@
:class="[b({
mark,
plain,
- round
+ round,
+ [size]: size
}), {
'van-hairline--surround': plain
}]"
@@ -27,6 +28,7 @@ export default create({
name: 'tag',
props: {
+ size: String,
type: String,
mark: Boolean,
color: String,
diff --git a/packages/tag/test/__snapshots__/demo.spec.js.snap b/packages/tag/test/__snapshots__/demo.spec.js.snap
index fd84b2d6a..b08179595 100644
--- a/packages/tag/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tag/test/__snapshots__/demo.spec.js.snap
@@ -11,5 +11,6 @@ exports[`renders demo correctly 1`] = `
style="background-color:#06bf04;">标签
标签 标签 标签 标签
+ 标签 标签 标签
`;
diff --git a/packages/tag/zh-CN.md b/packages/tag/zh-CN.md
index c5b54c918..92e2b92fb 100644
--- a/packages/tag/zh-CN.md
+++ b/packages/tag/zh-CN.md
@@ -58,11 +58,20 @@ Vue.use(Tag);
标签
```
+#### 标签大小
+
+```html
+标签
+标签
+标签
+```
+
### API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
-| type | 类型,可选值为`primary` `success` `danger` | `String` | `''`|
+| type | 类型,可选值为`primary` `success` `danger` | `String` | - |
+| size | 大小, 可选值为`large` `medium` | `String` | - |
| color | 自定义标签颜色 | `String` | - |
| plain | 是否为空心样式 | `Boolean` | `false` |
| round | 是否为圆角样式 | `Boolean` | `false` |
diff --git a/packages/vant-css/src/tag.css b/packages/vant-css/src/tag.css
index a1e723da3..d09c5183c 100644
--- a/packages/vant-css/src/tag.css
+++ b/packages/vant-css/src/tag.css
@@ -29,4 +29,12 @@
border-radius: 1.6em;
}
}
+
+ &--medium {
+ font-size: 12px;
+ }
+
+ &--large {
+ font-size: 14px;
+ }
}