diff --git a/example/pages/tag/index.js b/example/pages/tag/index.js
index 454020c0..560d44d4 100644
--- a/example/pages/tag/index.js
+++ b/example/pages/tag/index.js
@@ -1,11 +1 @@
-Page({
- data: {
- },
-
- onLoad: function () {
-
- },
-
- onShow: function() {
- },
-})
+Page({});
diff --git a/example/pages/tag/index.json b/example/pages/tag/index.json
index 6e6dae7d..f627a498 100644
--- a/example/pages/tag/index.json
+++ b/example/pages/tag/index.json
@@ -1,8 +1,7 @@
{
"navigationBarTitleText": "Tag 标记",
"usingComponents": {
- "van-cell": "../../dist/cell/index",
- "van-panel": "../../dist/panel/index",
+ "demo-block": "../../components/demo-block/index",
"van-tag": "../../dist/tag/index"
}
}
diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml
index 2f7d6425..a02a59a5 100644
--- a/example/pages/tag/index.wxml
+++ b/example/pages/tag/index.wxml
@@ -1,26 +1,20 @@
-
-
- 灰色
- 红色
- 不可用
-
-
+
+ 标签
+ 标签
+ 标签
+ 标签
+
-
-
- 会员折扣
- 返现
- 返现
- 不可用
-
-
+
+ 标签
+ 标签
+ 标签
+ 标签
+
-
-
- 灰色
- 会员折扣
- 返现
- 返现
- 返现不可用
-
-
+
+ 标签
+ 标签
+ 标签
+ 标签
+
diff --git a/example/pages/tag/index.wxss b/example/pages/tag/index.wxss
index 72329fdb..e69de29b 100644
--- a/example/pages/tag/index.wxss
+++ b/example/pages/tag/index.wxss
@@ -1,8 +0,0 @@
-.tag-demo {
- display: block;
- margin: 15px 0;
-}
-
-van-tag + van-tag {
- margin-left: 10px;
-}
diff --git a/packages/tag/README.md b/packages/tag/README.md
index a28109fd..7f5c0c7d 100644
--- a/packages/tag/README.md
+++ b/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
-取消订单
+标签
+标签
+标签
+标签
```
-#### 类型
-tag支持额外的三种类型 primary, danger, warn
+#### 空心样式
+设置`plain`属性设置为空心样式
+
```html
-会员折扣
-返现
-返现
+标签
+标签
+标签
+标签
```
+#### 圆角样式
+通过`mark`设置为圆角样式
-#### 其他
-tag镂空状态
```html
-返现
+标签
+标签
+标签
+标签
```
-tag禁用状态
-```html
-不可用
-```
-
-
### API
-| 名称 | 类型 | 是否必须 | 默认 | 描述 |
-|---------|---------|----------|------|-------|
-| type | String | 否 | 空 | tag类型，值有primary、warn、danger |
-| plain | Boolean | 否 | false | tag是否镂空，默认为false |
-| disabled | Boolean | 否 | false | tag是否禁用，默认为false |
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
+| plain | 是否为空心样式 | `Boolean` | `false` |
+| mark | 是否为圆角样式 | `Boolean` | `false` |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| default | 自定义 Tag 显示内容 |
### 外部样式类
-| 类名 | 说明 |
+
+| 类名 | 说明 |
|-----------|-----------|
-| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
-| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |
+| custom-class | 根节点样式类 |
diff --git a/packages/tag/index.js b/packages/tag/index.js
index 8f936e68..7a9299d1 100644
--- a/packages/tag/index.js
+++ b/packages/tag/index.js
@@ -1,17 +1,9 @@
Component({
- externalClasses: ['custom-class', 'theme-class'],
+ externalClasses: ['custom-class'],
properties: {
- type: {
- type: String,
- },
- plain: {
- type: Boolean,
- value: false,
- },
- disabled: {
- type: Boolean,
- value: false,
- }
+ type: String,
+ mark: Boolean,
+ plain: Boolean
}
});
diff --git a/packages/tag/index.pcss b/packages/tag/index.pcss
index c84e0bfa..cc8b00db 100644
--- a/packages/tag/index.pcss
+++ b/packages/tag/index.pcss
@@ -1,83 +1,54 @@
-@import '../common/_var';
-@import "../common/_mixins";
+@import '../helper/index.pcss';
.van-tag {
display: inline-block;
- position: relative;
- box-sizing: border-box;
- line-height: 16px;
- padding: 0 5px;
- border-radius: 2px;
- font-size: 11px;
+ padding: 2px 5px;
+ line-height: normal;
+ border-radius: 3px;
+ font-size: 10px;
background: $gray;
- text-align: center;
color: $white;
&::after {
- @mixin hairline;
- border-width: 1px;
+ border-color: currentColor;
border-radius: 4px;
}
-}
-.van-tag--plain {
- color: $gray;
- background: $white;
-}
+ &--mark {
+ padding-right: 7px;
+ border-radius: 0 8px 8px 0;
-/* 各种主题代码 */
-.van-tag--primary {
- color: $button-primary-color;
- background-color: $button-primary-background-color;
-
- &::after {
- border-color: $button-primary-background-color;
+ &::after {
+ border-radius: 0 16px 16px 0;
+ }
}
- /* 空心形式 */
- &.van-tag--plain {
- color: $button-primary-background-color;
+ &--success {
+ background: $green;
+
+ &.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;
- }
-}
-
-.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;
+ color: $gray;
}
}
diff --git a/packages/tag/index.wxml b/packages/tag/index.wxml
index a585a66f..b22107b8 100644
--- a/packages/tag/index.wxml
+++ b/packages/tag/index.wxml
@@ -1,6 +1,5 @@
-
-
-
-
\ No newline at end of file
+
+