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

[improvement] Tag: add round prop (#1947)

Browse Source
This commit is contained in:
neverland 2018-10-17 14:40:42 +08:00 committed by GitHub
parent abbde67325
commit 935108c15c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 69 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/card/test/__snapshots__/demo.spec.js.snap
View File

@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-card">
<a href="javascript:;" class="van-card__thumb">
<img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-tag--danger van-card__tag">
<img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">
标签
</span></a>
<div class="van-card__content">

4
packages/cell/demo/index.vue
View File

@ -67,10 +67,6 @@ export default {
.demo-cell {
.van-cell-text {
margin-right: 5px;
}
.van-cell-text,
.van-tag--danger {
vertical-align: middle;
}
}

2
packages/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -86,7 +86,7 @@ exports[`renders demo correctly 1`] = `
<i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
<div class="van-cell__title"><span class="van-cell-text">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
<div class="van-cell__title"><span class="van-cell-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div>
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->

15
packages/tag/demo/index.vue
View File

@ -9,12 +9,19 @@
<demo-block :title="$t('plain')">
<van-tag plain>{{ $t('tag') }}</van-tag>
<van-tag plain type="danger">{{ $t('tag') }}</van-tag>
<van-tag plain type="primary">{{ $t('tag') }}</van-tag>
<van-tag round plain type="danger">{{ $t('tag') }}</van-tag>
<van-tag round plain type="primary">{{ $t('tag') }}</van-tag>
<van-tag plain type="success">{{ $t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('round')">
<van-tag round>{{ $t('tag') }}</van-tag>
<van-tag round type="danger">{{ $t('tag') }}</van-tag>
<van-tag round type="primary">{{ $t('tag') }}</van-tag>
<van-tag round type="success">{{ $t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('mark')">
<van-tag mark>{{ $t('tag') }}</van-tag>
<van-tag mark type="danger">{{ $t('tag') }}</van-tag>
<van-tag mark type="primary">{{ $t('tag') }}</van-tag>
@ -36,11 +43,13 @@ export default {
'zh-CN': {
plain: '空心样式',
round: '圆角样式',
mark: '标记样式',
customColor: '自定义颜色'
},
'en-US': {
plain: 'Plain style',
round: 'Mark style',
round: 'Round style',
mark: 'Mark style',
customColor: 'Custom Color'
}
}

10
packages/tag/en-US.md
View File

@ -27,6 +27,15 @@ Vue.use(Tag);
<van-tag plain type="success">Tag</van-tag>
```
#### Round style
```html
<van-tag round>Tag</van-tag>
<van-tag round type="danger">Tag</van-tag>
<van-tag round type="primary">Tag</van-tag>
<van-tag round type="success">Tag</van-tag>
```
#### Mark style
```html
@ -51,6 +60,7 @@ Vue.use(Tag);
|-----------|-----------|-----------|-------------|
| type | Type, can be set to `primary` `success` `danger` | `String` | `''`|
| plain | Whether to be plain style | `Boolean` | `false` |
| round | Whether to be round style | `Boolean` | `false` |
| mark | Wtether to be mark style | `Boolean` | `false` |
### Slot

19
packages/tag/index.vue
View File

@ -3,7 +3,7 @@
:class="[b({
mark,
plain,
[type]: type
round
}), {
'van-hairline--surround': plain
}]"
@ -16,6 +16,13 @@
<script>
import create from '../utils/create';
const DEFAULT_COLOR = '#999';
const COLOR_MAP = {
danger: '#f44',
primary: '#38f',
success: '#06bf04'
};
export default create({
name: 'tag',
@ -23,17 +30,15 @@ export default create({
type: String,
mark: Boolean,
color: String,
plain: Boolean
plain: Boolean,
round: Boolean
},
computed: {
style() {
if (this.color) {
const color = this.color || COLOR_MAP[this.type] || DEFAULT_COLOR;
const key = this.plain ? 'color' : 'backgroundColor';
return {
[key]: this.color
};
}
return { [key]: color };
}
}
});

13
packages/tag/test/__snapshots__/demo.spec.js.snap
View File

@ -2,12 +2,13 @@
exports[`renders demo correctly 1`] = `
<div>
<div><span class="van-tag">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--primary">标签</span></div>
<div><span class="van-tag van-tag--plain 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--primary van-hairline--surround">标签</span>
<span
class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span>
</div>
<div><span class="van-tag van-tag--mark">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span></div>
<div><span class="van-tag" style="background-color:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#06bf04;">标签</span> <span class="van-tag" style="background-color:#38f;">标签</span></div>
<div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#999;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround"
style="color:#38f;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#06bf04;">标签</span></div>
<div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--round" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--round"
style="background-color:#06bf04;">标签</span></div>
<div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--mark"
style="background-color:#06bf04;">标签</span></div>
<div><span class="van-tag" style="background-color:#f2826a;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f2826a;">标签</span> <span class="van-tag" style="background-color:#7232dd;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround"
style="color:#7232dd;">标签</span></div>
</div>

13
packages/tag/zh-CN.md
View File

@ -30,7 +30,17 @@ Vue.use(Tag);
```
#### 圆角样式
通过`mark`设置为圆角样式
通过`round`设置为圆角样式
```html
<van-tag round>标签</van-tag>
<van-tag round type="danger">标签</van-tag>
<van-tag round type="primary">标签</van-tag>
<van-tag round type="success">标签</van-tag>
```
#### 标记样式
通过`mark`设置为标记样式(半圆角)
```html
<van-tag mark>标签</van-tag>
@ -55,6 +65,7 @@ Vue.use(Tag);
| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
| color | 自定义标签颜色 | `String` | - |
| plain | 是否为空心样式 | `Boolean` | `false` |
| round | 是否为圆角样式 | `Boolean` | `false` |
| mark | 是否为标记样式 | `Boolean` | `false` |
### Slot

48
packages/vant-css/src/tag.css
View File

@ -1,54 +1,32 @@
@import './common/var.css';
.van-tag {
display: inline-block;
padding: 2px 5px;
line-height: normal;
border-radius: 3px;
font-size: 10px;
background: $gray;
color: $white;
font-size: 10px;
padding: .2em .5em;
line-height: normal;
border-radius: .2em;
display: inline-block;
&::after {
border-color: currentColor;
border-radius: 4px;
border-radius: .4em;
}
&--mark {
padding-right: 7px;
border-radius: 0 8px 8px 0;
padding-right: .6em;
border-radius: 0 .8em .8em 0;
&::after {
border-radius: 0 16px 16px 0;
border-radius: 0 1.6em 1.6em 0;
}
}
&--success {
background: $green;
&--round {
border-radius: .8em;
&.van-tag--plain {
color: $green;
&::after {
border-radius: 1.6em;
}
}
&--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;
color: $gray;
}
}