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; + } }