blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Tag: add text-color prop (#1077)

Browse Source
This commit is contained in:
neverland 2018-12-13 16:49:35 +08:00 committed by GitHub
parent a2f9e34fac
commit 5aab460b75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/pages/tag/index.wxml
View File

@ -30,7 +30,8 @@
<van-tag class="demo-margin-right" color="#f2826a">标签</van-tag> <van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
<van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag> <van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
<van-tag class="demo-margin-right" color="#7232dd">标签</van-tag> <van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
<van-tag color="#7232dd" plain>标签</van-tag> <van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
</demo-block> </demo-block>
<demo-block title="标签大小" padding> <demo-block title="标签大小" padding>

8
packages/tag/README.md
View File

@ -12,6 +12,7 @@
### 代码演示 ### 代码演示
#### 基础用法 #### 基础用法
通过 type 属性控制 Tag 颜色，默认为灰色 通过 type 属性控制 Tag 颜色，默认为灰色
```html ```html
@ -22,6 +23,7 @@
``` ```
#### 空心样式 #### 空心样式
设置`plain`属性设置为空心样式 设置`plain`属性设置为空心样式
```html ```html
@ -32,6 +34,7 @@
``` ```
#### 圆角样式 #### 圆角样式
通过`round`设置为圆角样式 通过`round`设置为圆角样式
```html ```html
@ -42,6 +45,7 @@
``` ```
#### 标记样式 #### 标记样式
通过`mark`设置为标记样式(半圆角) 通过`mark`设置为标记样式(半圆角)
```html ```html
@ -58,6 +62,7 @@
<van-tag color="#f2826a" plain>标签</van-tag> <van-tag color="#f2826a" plain>标签</van-tag>
<van-tag color="#7232dd">标签</van-tag> <van-tag color="#7232dd">标签</van-tag>
<van-tag color="#7232dd" plain>标签</van-tag> <van-tag color="#7232dd" plain>标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
``` ```
#### 标签大小 #### 标签大小
@ -74,10 +79,11 @@
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| type | 类型，可选值为`primary` `success` `danger` | `String` | - | | type | 类型，可选值为`primary` `success` `danger` | `String` | - |
| size | 大小, 可选值为`large` `medium` | `String` | - | | size | 大小, 可选值为`large` `medium` | `String` | - |
| color | 自定义标签颜色 | `String` | - | | color | 标签颜色 | `String` | - |
| plain | 是否为空心样式 | `Boolean` | `false` | | plain | 是否为空心样式 | `Boolean` | `false` |
| round | 是否为圆角样式 | `Boolean` | `false` | | round | 是否为圆角样式 | `Boolean` | `false` |
| mark | 是否为标记样式 | `Boolean` | `false` | | mark | 是否为标记样式 | `Boolean` | `false` |
| text-color | 文本颜色，优先级高于`color`属性 | `String` | `white` |
### Slot ### Slot

15
packages/tag/index.ts
View File

@ -8,6 +8,10 @@ const COLOR_MAP = {
success: GREEN success: GREEN
}; };
type Style = {
[key: string]: string;
};
VantComponent({ VantComponent({
props: { props: {
size: String, size: String,
@ -15,14 +19,21 @@ VantComponent({
mark: Boolean, mark: Boolean,
color: String, color: String,
plain: Boolean, plain: Boolean,
round: Boolean round: Boolean,
textColor: String
}, },
computed: { computed: {
style() { style() {
const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR; const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
const key = this.data.plain ? 'color' : 'background-color'; const key = this.data.plain ? 'color' : 'background-color';
return `${key}: ${color}`; const style = { [key]: color } as Style;
if (this.data.textColor) {
style.color = this.data.textColor;
}
return Object.keys(style).map(key => `${key}: ${style[key]}`).join(';');
} }
} }
}); });