mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-08-06 21:39:45 +08:00
[improvement] Tag: add round、size、color props (#791)
This commit is contained in:
neverland
GitHub
parent
853b28e048
commit
6a8dd1896a
@ -41,7 +41,7 @@ const MAP = {
|
||||
'switch-cell': 'switch-cell-201808221124.png',
|
||||
'submit-bar': 'submit-bar-a-201809271357.png',
|
||||
tab: 'tab-20181015.png',
|
||||
tag: 'tag-201808092138.png',
|
||||
tag: 'tag-20181019.jpeg',
|
||||
tabbar: 'tabbar-201808160922.png',
|
||||
toast: 'toast-201808191046.png',
|
||||
transition: 'transition-20180821.png',
|
||||
|
||||
@ -1,20 +1,40 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-tag custom-class="demo-margin-right">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" type="success">标签</van-tag>
|
||||
<van-tag class="demo-margin-right">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="success">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="空心样式" padding>
|
||||
<van-tag custom-class="demo-margin-right" plain>标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" plain type="danger">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" plain type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="圆角样式" padding>
|
||||
<van-tag custom-class="demo-margin-right" mark>标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" mark type="danger">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" mark type="primary">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" round type="primary">标签</van-tag>
|
||||
<van-tag round type="success">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标记样式" padding>
|
||||
<van-tag class="demo-margin-right" mark>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<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="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标签大小" padding>
|
||||
<van-tag class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" type="danger" size="medium">标签</van-tag>
|
||||
<van-tag type="danger" size="large">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
@ -32,7 +32,17 @@
|
||||
```
|
||||
|
||||
#### 圆角样式
|
||||
通过`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>
|
||||
@ -41,13 +51,33 @@
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-tag color="#f2826a">标签</van-tag>
|
||||
<van-tag color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
```
|
||||
|
||||
#### 标签大小
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag size="medium">标签</van-tag>
|
||||
<van-tag size="large">标签</van-tag>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
|
||||
| type | 类型，可选值为`primary` `success` `danger` | `String` | - |
|
||||
| size | 大小, 可选值为`large` `medium` | `String` | - |
|
||||
| color | 自定义标签颜色 | `String` | - |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` |
|
||||
| mark | 是否为圆角样式 | `Boolean` | `false` |
|
||||
| round | 是否为圆角样式 | `Boolean` | `false` |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -1,54 +1,40 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.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;
|
||||
}
|
||||
&--medium {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: @blue;
|
||||
|
||||
&.van-tag--plain {
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
background: @white;
|
||||
color: @gray;
|
||||
&--large {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,38 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
const DEFAULT_COLOR = '#999';
|
||||
const COLOR_MAP = {
|
||||
danger: '#f44',
|
||||
primary: '#38f',
|
||||
success: '#06bf04'
|
||||
};
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
size: String,
|
||||
type: String,
|
||||
mark: Boolean,
|
||||
plain: Boolean
|
||||
color: String,
|
||||
plain: Boolean,
|
||||
round: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes() {
|
||||
const { data } = this;
|
||||
return this.classNames('van-tag', 'custom-class', {
|
||||
'van-tag--mark': data.mark,
|
||||
'van-tag--plain': data.plain,
|
||||
'van-tag--round': data.round,
|
||||
[`van-tag--${data.size}`]: data.size,
|
||||
'van-hairline--surround': data.plain
|
||||
});
|
||||
},
|
||||
|
||||
style() {
|
||||
const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
|
||||
const key = this.data.plain ? 'color' : 'background-color';
|
||||
return `${key}: ${color}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<view
|
||||
class="van-tag custom-class {{ mark ? 'van-tag--mark' : '' }} {{ plain ? 'van-tag--plain van-hairline--surround' : '' }} {{ type ? 'van-tag--' + type : '' }}"
|
||||
>
|
||||
<view class="{{ classes }}" style="{{ style }}">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user