From 7cb78a3fefd059f8cd66837dd31d9af2995d7f0e Mon Sep 17 00:00:00 2001 From: rex Date: Sat, 2 Nov 2019 20:14:50 +0800 Subject: [PATCH] feat(Tabbar & Tag): support css variables @rex-zsd (#2240) --- example/pages/tag/index.js | 15 +++++++++++- example/pages/tag/index.wxml | 43 ++++++++++++++++++++++++++------- packages/common/style/var.less | 19 +++++++++++++++ packages/tabbar-item/index.less | 30 ++++++++++------------- packages/tabbar-item/index.wxml | 8 +++--- packages/tabbar/index.less | 4 +-- packages/tag/index.less | 35 ++++++++++++++++----------- packages/tag/index.ts | 7 ++++++ packages/tag/index.wxml | 6 +++++ 9 files changed, 120 insertions(+), 47 deletions(-) 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) : '' }}" > +