diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue
index ca042309..88274492 100644
--- a/docs/src/Preview.vue
+++ b/docs/src/Preview.vue
@@ -41,7 +41,7 @@ const MAP = {
'switch-cell': 'switch-cell-201808221124.png',
'submit-bar': 'submit-bar-a-201809271357.png',
tab: 'tab-20181015.png',
- tag: 'tag-201808092138.png',
+ tag: 'tag-20181019.jpeg',
tabbar: 'tabbar-201808160922.png',
toast: 'toast-201808191046.png',
transition: 'transition-20180821.png',
diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml
index a02a59a5..088da5e1 100644
--- a/example/pages/tag/index.wxml
+++ b/example/pages/tag/index.wxml
@@ -1,20 +1,40 @@
- 标签
- 标签
- 标签
+ 标签
+ 标签
+ 标签
标签
- 标签
- 标签
- 标签
+ 标签
+ 标签
+ 标签
标签
- 标签
- 标签
- 标签
+ 标签
+ 标签
+ 标签
+ 标签
+
+
+
+ 标签
+ 标签
+ 标签
标签
+
+
+ 标签
+ 标签
+ 标签
+ 标签
+
+
+
+ 标签
+ 标签
+ 标签
+
diff --git a/packages/tag/README.md b/packages/tag/README.md
index 4748249d..69e76a57 100644
--- a/packages/tag/README.md
+++ b/packages/tag/README.md
@@ -32,7 +32,17 @@
```
#### 圆角样式
-通过`mark`设置为圆角样式
+通过`round`设置为圆角样式
+
+```html
+标签
+标签
+标签
+标签
+```
+
+#### 标记样式
+通过`mark`设置为标记样式(半圆角)
```html
标签
@@ -41,13 +51,33 @@
标签
```
+#### 自定义颜色
+
+```html
+标签
+标签
+标签
+标签
+```
+
+#### 标签大小
+
+```html
+标签
+标签
+标签
+```
+
### API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
-| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
+| type | 类型，可选值为`primary` `success` `danger` | `String` | - |
+| size | 大小, 可选值为`large` `medium` | `String` | - |
+| color | 自定义标签颜色 | `String` | - |
| plain | 是否为空心样式 | `Boolean` | `false` |
-| mark | 是否为圆角样式 | `Boolean` | `false` |
+| round | 是否为圆角样式 | `Boolean` | `false` |
+| mark | 是否为标记样式 | `Boolean` | `false` |
### Slot
diff --git a/packages/tag/index.less b/packages/tag/index.less
index 53397be8..c2649c28 100644
--- a/packages/tag/index.less
+++ b/packages/tag/index.less
@@ -1,54 +1,40 @@
@import '../common/style/var.less';
.van-tag {
- display: inline-block;
- padding: 2px 5px;
- line-height: normal;
- border-radius: 3px;
- font-size: 10px;
- background: @gray;
color: @white;
+ font-size: 10px;
+ padding: .2em .5em;
+ line-height: normal;
+ border-radius: .2em;
+ display: inline-block;
&::after {
border-color: currentColor;
- border-radius: 4px;
+ border-radius: .4em;
}
&--mark {
- padding-right: 7px;
- border-radius: 0 8px 8px 0;
+ padding-right: .6em;
+ border-radius: 0 .8em .8em 0;
&::after {
- border-radius: 0 16px 16px 0;
+ border-radius: 0 1.6em 1.6em 0;
}
}
- &--success {
- background: @green;
+ &--round {
+ border-radius: .8em;
- &.van-tag--plain {
- color: @green;
+ &::after {
+ border-radius: 1.6em;
}
}
- &--danger {
- background: @button-danger-background-color;
-
- &.van-tag--plain {
- color: @button-danger-background-color;
- }
+ &--medium {
+ font-size: 12px;
}
- &--primary {
- background: @blue;
-
- &.van-tag--plain {
- color: @blue;
- }
- }
-
- &--plain {
- background: @white;
- color: @gray;
+ &--large {
+ font-size: 14px;
}
}
diff --git a/packages/tag/index.ts b/packages/tag/index.ts
index 05d41648..7d38b59f 100644
--- a/packages/tag/index.ts
+++ b/packages/tag/index.ts
@@ -1,9 +1,38 @@
import { VantComponent } from '../common/component';
+const DEFAULT_COLOR = '#999';
+const COLOR_MAP = {
+ danger: '#f44',
+ primary: '#38f',
+ success: '#06bf04'
+};
+
VantComponent({
props: {
+ size: String,
type: String,
mark: Boolean,
- plain: Boolean
+ color: String,
+ plain: Boolean,
+ round: Boolean
+ },
+
+ computed: {
+ classes() {
+ const { data } = this;
+ return this.classNames('van-tag', 'custom-class', {
+ 'van-tag--mark': data.mark,
+ 'van-tag--plain': data.plain,
+ 'van-tag--round': data.round,
+ [`van-tag--${data.size}`]: data.size,
+ 'van-hairline--surround': data.plain
+ });
+ },
+
+ style() {
+ const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
+ const key = this.data.plain ? 'color' : 'background-color';
+ return `${key}: ${color}`;
+ }
}
});
diff --git a/packages/tag/index.wxml b/packages/tag/index.wxml
index e8cef802..5a7a009f 100644
--- a/packages/tag/index.wxml
+++ b/packages/tag/index.wxml
@@ -1,5 +1,3 @@
-
+