Skip to content

Commit e5dcf1c

Browse files
chenjiahanchenjiahan
authored
feat(Tag): add warning type (youzan#4232)
1 parent af018ca commit e5dcf1c

6 files changed

Lines changed: 59 additions & 138 deletions

File tree

‎src/style/var.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,7 @@
610610
@tag-dander-color: @red;
611611
@tag-primary-color: @blue;
612612
@tag-success-color: @green;
613+
@tag-warning-color: @orange;
613614
@tag-default-color: @gray-dark;
614615
@tag-plain-background-color: @white;
615616

‎src/tag/README.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,36 +15,40 @@ Vue.use(Tag);
1515

1616
```html
1717
<van-tag>Tag</van-tag>
18-
<van-tag type="danger">Tag</van-tag>
1918
<van-tag type="primary">Tag</van-tag>
2019
<van-tag type="success">Tag</van-tag>
20+
<van-tag type="danger">Tag</van-tag>
21+
<van-tag type="warning">Tag</van-tag>
2122
```
2223

2324
### Plain style
2425

2526
```html
2627
<van-tag plain>Tag</van-tag>
27-
<van-tag plain type="danger">Tag</van-tag>
2828
<van-tag plain type="primary">Tag</van-tag>
2929
<van-tag plain type="success">Tag</van-tag>
30+
<van-tag plain type="danger">Tag</van-tag>
31+
<van-tag plain type="warning">Tag</van-tag>
3032
```
3133

3234
### Round style
3335

3436
```html
3537
<van-tag round>Tag</van-tag>
36-
<van-tag round type="danger">Tag</van-tag>
3738
<van-tag round type="primary">Tag</van-tag>
3839
<van-tag round type="success">Tag</van-tag>
40+
<van-tag round type="danger">Tag</van-tag>
41+
<van-tag round type="warning">Tag</van-tag>
3942
```
4043

4144
### Mark style
4245

4346
```html
4447
<van-tag mark>Tag</van-tag>
45-
<van-tag mark type="danger">Tag</van-tag>
4648
<van-tag mark type="primary">Tag</van-tag>
4749
<van-tag mark type="success">Tag</van-tag>
50+
<van-tag mark type="danger">Tag</van-tag>
51+
<van-tag mark type="warning">Tag</van-tag>
4852
```
4953

5054
### Custom Color
@@ -60,9 +64,9 @@ Vue.use(Tag);
6064
### Custom Size
6165

6266
```html
63-
<van-tag>Tag</van-tag>
64-
<van-tag size="medium">Tag</van-tag>
65-
<van-tag size="large">Tag</van-tag>
67+
<van-tag type="danger">Tag</van-tag>
68+
<van-tag type="danger" size="medium">Tag</van-tag>
69+
<van-tag type="danger" size="large">Tag</van-tag>
6670
```
6771

6872
## API
@@ -71,7 +75,7 @@ Vue.use(Tag);
7175

7276
| Attribute | Description | Type | Default |
7377
|------|------|------|------|
74-
| type | Type, can be set to `primary` `success` `danger` | `string` | `default` |
78+
| type | Type, can be set to `primary` `success` `danger` `warning` | `string` | `default` |
7579
| size | Size, can be set to `large` `medium` | `string` | - |
7680
| color | Custom color | `string` | - |
7781
| plain | Whether to be plain style | `boolean` | `false` |

‎src/tag/README.zh-CN.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ Vue.use(Tag);
1717

1818
```html
1919
<van-tag>标签</van-tag>
20-
<van-tag type="danger">标签</van-tag>
2120
<van-tag type="primary">标签</van-tag>
2221
<van-tag type="success">标签</van-tag>
22+
<van-tag type="danger">标签</van-tag>
23+
<van-tag type="warning">标签</van-tag>
2324
```
2425

2526
### 空心样式
@@ -28,9 +29,10 @@ Vue.use(Tag);
2829

2930
```html
3031
<van-tag plain>标签</van-tag>
31-
<van-tag plain type="danger">标签</van-tag>
3232
<van-tag plain type="primary">标签</van-tag>
3333
<van-tag plain type="success">标签</van-tag>
34+
<van-tag plain type="danger">标签</van-tag>
35+
<van-tag plain type="warning">标签</van-tag>
3436
```
3537

3638
### 圆角样式
@@ -39,9 +41,10 @@ Vue.use(Tag);
3941

4042
```html
4143
<van-tag round>标签</van-tag>
42-
<van-tag round type="danger">标签</van-tag>
4344
<van-tag round type="primary">标签</van-tag>
4445
<van-tag round type="success">标签</van-tag>
46+
<van-tag round type="danger">标签</van-tag>
47+
<van-tag round type="warning">标签</van-tag>
4548
```
4649

4750
### 标记样式
@@ -50,9 +53,10 @@ Vue.use(Tag);
5053

5154
```html
5255
<van-tag mark>标签</van-tag>
53-
<van-tag mark type="danger">标签</van-tag>
5456
<van-tag mark type="primary">标签</van-tag>
5557
<van-tag mark type="success">标签</van-tag>
58+
<van-tag mark type="danger">标签</van-tag>
59+
<van-tag mark type="warning">标签</van-tag>
5660
```
5761

5862
### 自定义颜色
@@ -68,9 +72,9 @@ Vue.use(Tag);
6872
### 标签大小
6973

7074
```html
71-
<van-tag>标签</van-tag>
72-
<van-tag size="medium">标签</van-tag>
73-
<van-tag size="large">标签</van-tag>
75+
<van-tag type="danger">标签</van-tag>
76+
<van-tag type="danger" size="medium">标签</van-tag>
77+
<van-tag type="danger" size="large">标签</van-tag>
7478
```
7579

7680
## API
@@ -79,7 +83,7 @@ Vue.use(Tag);
7983

8084
| 参数 | 说明 | 类型 | 默认值 | 版本 |
8185
|------|------|------|------|------|
82-
| type | 类型，可选值为`primary` `success` `danger` | `string` | `default` | - |
86+
| type | 类型，可选值为`primary` `success` `danger` `warning` | `string` | `default` | - |
8387
| size | 大小, 可选值为`large` `medium` | `string` | - | - |
8488
| color | 标签颜色 | `string` | - | - |
8589
| plain | 是否为空心样式 | `boolean` | `false` | - |

‎src/tag/demo/index.vue‎

Lines changed: 20 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -2,116 +2,48 @@
22
<demo-section>
33
<demo-block :title="$t('basicUsage')">
44
<van-tag>{{ $t('tag') }}</van-tag>
5-
<van-tag type="danger">{{ $t('tag') }}</van-tag>
65
<van-tag type="primary">{{ $t('tag') }}</van-tag>
76
<van-tag type="success">{{ $t('tag') }}</van-tag>
7+
<van-tag type="danger">{{ $t('tag') }}</van-tag>
8+
<van-tag type="warning">{{ $t('tag') }}</van-tag>
89
</demo-block>
910

1011
<demo-block :title="$t('plain')">
1112
<van-tag plain>{{ $t('tag') }}</van-tag>
12-
<van-tag
13-
round
14-
plain
15-
type="danger"
16-
>
17-
{{ $t('tag') }}
18-
</van-tag>
19-
<van-tag
20-
round
21-
plain
22-
type="primary"
23-
>
24-
{{ $t('tag') }}
25-
</van-tag>
26-
<van-tag
27-
plain
28-
type="success"
29-
>
30-
{{ $t('tag') }}
31-
</van-tag>
13+
<van-tag plain type="primary">{{ $t('tag') }}</van-tag>
14+
<van-tag plain type="success">{{ $t('tag') }}</van-tag>
15+
<van-tag plain type="danger">{{ $t('tag') }}</van-tag>
16+
<van-tag plain type="warning">{{ $t('tag') }}</van-tag>
3217
</demo-block>
3318

3419
<demo-block :title="$t('round')">
3520
<van-tag round>{{ $t('tag') }}</van-tag>
36-
<van-tag
37-
round
38-
type="danger"
39-
>
40-
{{ $t('tag') }}
41-
</van-tag>
42-
<van-tag
43-
round
44-
type="primary"
45-
>
46-
{{ $t('tag') }}
47-
</van-tag>
48-
<van-tag
49-
round
50-
type="success"
51-
>
52-
{{ $t('tag') }}
53-
</van-tag>
21+
<van-tag round type="primary">{{ $t('tag') }}</van-tag>
22+
<van-tag round type="success">{{ $t('tag') }}</van-tag>
23+
<van-tag round type="danger">{{ $t('tag') }}</van-tag>
24+
<van-tag round type="warning">{{ $t('tag') }}</van-tag>
5425
</demo-block>
5526

5627
<demo-block :title="$t('mark')">
5728
<van-tag mark>{{ $t('tag') }}</van-tag>
58-
<van-tag
59-
mark
60-
type="danger"
61-
>
62-
{{ $t('tag') }}
63-
</van-tag>
64-
<van-tag
65-
mark
66-
type="primary"
67-
>
68-
{{ $t('tag') }}
69-
</van-tag>
70-
<van-tag
71-
mark
72-
type="success"
73-
>
74-
{{ $t('tag') }}
75-
</van-tag>
29+
<van-tag mark type="primary">{{ $t('tag') }}</van-tag>
30+
<van-tag mark type="success">{{ $t('tag') }}</van-tag>
31+
<van-tag mark type="danger">{{ $t('tag') }}</van-tag>
32+
<van-tag mark type="warning">{{ $t('tag') }}</van-tag>
7633
</demo-block>
7734

7835
<demo-block :title="$t('customColor')">
7936
<van-tag color="#f2826a">{{ $t('tag') }}</van-tag>
80-
<van-tag
81-
color="#f2826a"
82-
plain
83-
>
84-
{{ $t('tag') }}
85-
</van-tag>
37+
<van-tag color="#f2826a" plain>{{ $t('tag') }}</van-tag>
8638
<van-tag color="#7232dd">{{ $t('tag') }}</van-tag>
87-
<van-tag
88-
color="#7232dd"
89-
plain
90-
>
91-
{{ $t('tag') }}
92-
</van-tag>
93-
<van-tag
94-
color="#ffe1e1"
95-
text-color="#ad0000"
96-
>
97-
{{ $t('tag') }}
98-
</van-tag>
39+
<van-tag color="#7232dd" plain>{{ $t('tag') }}</van-tag>
40+
<van-tag color="#ffe1e1" text-color="#ad0000">{{ $t('tag') }}</van-tag>
9941
</demo-block>
10042

10143
<demo-block :title="$t('customSize')">
10244
<van-tag type="danger">{{ $t('tag') }}</van-tag>
103-
<van-tag
104-
type="danger"
105-
size="medium"
106-
>
107-
{{ $t('tag') }}
108-
</van-tag>
109-
<van-tag
110-
type="danger"
111-
size="large"
112-
>
113-
{{ $t('tag') }}
114-
</van-tag>
45+
<van-tag type="danger" size="medium">{{ $t('tag') }}</van-tag>
46+
<van-tag type="danger" size="large">{{ $t('tag') }}</van-tag>
11547
</demo-block>
11648
</demo-section>
11749
</template>
@@ -138,7 +70,7 @@ export default {
13870
</script>
13971

14072
<style lang="less">
141-
@import "../../style/var";
73+
@import '../../style/var';
14274
14375
.demo-tag {
14476
background-color: @white;

‎src/tag/index.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@
4545
}
4646
}
4747

48+
&--warning {
49+
background-color: @tag-warning-color;
50+
51+
&.van-tag--plain {
52+
color: @tag-warning-color;
53+
}
54+
}
55+
4856
&--plain {
4957
background-color: @tag-plain-background-color;
5058
}

‎src/tag/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 6 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,11 @@
22

33
exports[`renders demo correctly 1`] = `
44
<div>
5-
<div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span></div>
6-
<div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--round van-tag--danger van-hairline--surround">
7-
标签
8-
</span> <span class="van-tag van-tag--plain van-tag--round van-tag--primary van-hairline--surround">
9-
标签
10-
</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">
11-
标签
12-
</span></div>
13-
<div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--danger">
14-
标签
15-
</span> <span class="van-tag van-tag--round van-tag--primary">
16-
标签
17-
</span> <span class="van-tag van-tag--round van-tag--success">
18-
标签
19-
</span></div>
20-
<div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--danger">
21-
标签
22-
</span> <span class="van-tag van-tag--mark van-tag--primary">
23-
标签
24-
</span> <span class="van-tag van-tag--mark van-tag--success">
25-
标签
26-
</span></div>
27-
<div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">
28-
标签
29-
</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">
30-
标签
31-
</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">
32-
标签
33-
</span></div>
34-
<div><span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">
35-
标签
36-
</span> <span class="van-tag van-tag--large van-tag--danger">
37-
标签
38-
</span></div>
5+
<div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
6+
<div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
7+
<div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
8+
<div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
9+
<div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
10+
<div><span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">标签</span> <span class="van-tag van-tag--large van-tag--danger">标签</span></div>
3911
</div>
4012
`;

0 commit comments

Comments
 (0)