diff --git a/example/pages/tag/index.js b/example/pages/tag/index.js
index cc11dfda..a9feed40 100644
--- a/example/pages/tag/index.js
+++ b/example/pages/tag/index.js
@@ -1,3 +1,16 @@
import Page from '../../common/page';
-Page();
+Page({
+ data: {
+ show: {
+ success: true,
+ primary: true
+ }
+ },
+
+ onClose(event) {
+ this.setData({
+ [`show.${event.target.id}`]: false
+ });
+ }
+});
diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml
index 6820ec8f..430c466b 100644
--- a/example/pages/tag/index.wxml
+++ b/example/pages/tag/index.wxml
@@ -6,14 +6,6 @@
标签
-
- 标签
- 标签
- 标签
- 标签
- 标签
-
-
标签
标签
@@ -30,12 +22,22 @@
标签
+
+ 标签
+ 标签
+ 标签
+ 标签
+ 标签
+
+
标签
标签
标签
标签
- 标签
+ 标签
@@ -43,3 +45,26 @@
标签
标签
+
+
+ 标签
+ 标签
+
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 9610a27e..f2a13647 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -322,7 +322,26 @@
@submit-bar-tip-background-color: #fff7cc;
@submit-bar-tip-icon-size: 12px;
+// Tabbar
+@tabbar-height: 50px;
+@tabbar-background-color: @white;
+
+// TabbarItem
+@tabbar-item-font-size: @font-size-sm;
+@tabbar-item-text-color: @gray-darker;
+@tabbar-item-active-color: @blue;
+@tabbar-item-line-height: 1;
+@tabbar-item-icon-size: 18px;
+@tabbar-item-margin-bottom: 5px;
+
// Tag
+@tag-padding: .2em .5em;
+@tag-font-size: @font-size-xs;
+@tag-medium-font-size: @font-size-sm;
+@tag-large-font-size: @font-size-md;
+@tag-text-color: @white;
+@tag-border-radius: .2em;
+@tag-round-border-radius: @border-radius-max;
@tag-dander-color: @red;
@tag-primary-color: @blue;
@tag-success-color: @green;
diff --git a/packages/tabbar-item/index.less b/packages/tabbar-item/index.less
index b54544aa..726448b2 100644
--- a/packages/tabbar-item/index.less
+++ b/packages/tabbar-item/index.less
@@ -11,30 +11,26 @@
align-items: center;
justify-content: center;
height: 100%;
- font-size: 12px;
- line-height: 1;
- .theme(color, '@gray-darker');
+ .theme(color, '@tabbar-item-text-color');
+ .theme(font-size, '@tabbar-item-font-size');
+ .theme(line-height, '@tabbar-item-line-height');
&__icon {
position: relative;
- margin-bottom: 5px;
- font-size: 18px;
+ .theme(margin-bottom, '@tabbar-item-margin-bottom');
+ .theme(font-size, '@tabbar-item-icon-size');
- &--dot {
- &::after {
- position: absolute;
- top: 0;
- right: -8px;
- width: 8px;
- height: 8px;
- border-radius: 100%;
- content: ' ';
- .theme(background-color, '@red');
- }
+ &__inner {
+ display: block;
+ min-width: 1em;
}
}
&--active {
- .theme(color, '@blue');
+ .theme(color, '@tabbar-item-active-color');
+ }
+
+ &__info {
+ margin-top: 2px;
}
}
diff --git a/packages/tabbar-item/index.wxml b/packages/tabbar-item/index.wxml
index b2649ae4..d83b061f 100644
--- a/packages/tabbar-item/index.wxml
+++ b/packages/tabbar-item/index.wxml
@@ -5,11 +5,11 @@
style="color: {{ active ? activeColor : inactiveColor }}"
bind:tap="onClick"
>
-
+
diff --git a/packages/tabbar/index.less b/packages/tabbar/index.less
index b0b4ab48..33624a64 100644
--- a/packages/tabbar/index.less
+++ b/packages/tabbar/index.less
@@ -4,8 +4,8 @@
.van-tabbar {
display: flex;
width: 100%;
- height: 50px;
- .theme(background-color, '@white');
+ .theme(height, '@tabbar-height');
+ .theme(background-color, '@tabbar-background-color');
&--fixed {
position: fixed;
diff --git a/packages/tag/index.less b/packages/tag/index.less
index 1c28f99a..fb4093a9 100644
--- a/packages/tag/index.less
+++ b/packages/tag/index.less
@@ -2,16 +2,17 @@
@import '../common/style/theme.less';
.van-tag {
- display: inline-block;
- padding: 0.2em 0.5em;
- font-size: 10px;
+ display: inline-flex;
+ align-items: center;
line-height: normal;
- border-radius: 0.2em;
- .theme(color, '@white');
+ .theme(padding, '@tag-padding');
+ .theme(color, '@tag-text-color');
+ .theme(font-size, '@tag-font-size');
+ .theme(border-radius, '@tag-border-radius');
&::after {
border-color: currentColor;
- border-radius: 0.4em;
+ .theme(border-radius, '@tag-border-radius * 2');
}
&--default {
@@ -59,27 +60,33 @@
}
&--mark {
- padding-right: 0.6em;
- border-radius: 0 0.8em 0.8em 0;
+ padding-right: 0.7em;
+ &,
&::after {
- border-radius: 0 1.6em 1.6em 0;
+ .theme(
+ border-radius,
+ '0 @tag-round-border-radius @tag-round-border-radius 0'
+ );
}
}
&--round {
- border-radius: 0.8em;
-
+ &,
&::after {
- border-radius: 1.6em;
+ .theme(border-radius, '@tag-round-border-radius');
}
}
&--medium {
- font-size: 12px;
+ .theme(font-size, '@tag-medium-font-size');
}
&--large {
- font-size: 14px;
+ .theme(font-size, '@tag-large-font-size');
+ }
+
+ &__close {
+ margin-left: 2px;
}
}
diff --git a/packages/tag/index.ts b/packages/tag/index.ts
index 30193803..4a43834f 100644
--- a/packages/tag/index.ts
+++ b/packages/tag/index.ts
@@ -11,6 +11,13 @@ VantComponent({
type: {
type: String,
value: 'default'
+ },
+ closeable: Boolean
+ },
+
+ methods: {
+ onClose() {
+ this.$emit('close');
}
}
});
diff --git a/packages/tag/index.wxml b/packages/tag/index.wxml
index 386b9832..8c786865 100644
--- a/packages/tag/index.wxml
+++ b/packages/tag/index.wxml
@@ -5,4 +5,10 @@
style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
>
+