docs(Tag): update demo (#7020)

This commit is contained in:
neverland
2020-08-19 17:15:37 +08:00
committed by GitHub
parent 4116bc731a
commit ba46a15c30
4 changed files with 199 additions and 192 deletions
+32 -56
View File
@@ -22,15 +22,20 @@ Vue.use(Tag);
<van-tag type="warning">标签</van-tag>
```
### 空心样式
设置 `plain` 属性设置为空心样式。
```html
<van-tag plain type="primary">标签</van-tag>
```
### 圆角样式
通过 `round` 设置为圆角样式。
```html
<van-tag round type="primary">标签</van-tag>
<van-tag round type="success">标签</van-tag>
<van-tag round type="danger">标签</van-tag>
<van-tag round type="warning">标签</van-tag>
```
### 标记样式
@@ -39,37 +44,6 @@ Vue.use(Tag);
```html
<van-tag mark type="primary">标签</van-tag>
<van-tag mark type="success">标签</van-tag>
<van-tag mark type="danger">标签</van-tag>
<van-tag mark type="warning">标签</van-tag>
```
### 空心样式
设置 `plain` 属性设置为空心样式。
```html
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="success">标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="warning">标签</van-tag>
```
### 自定义颜色
```html
<van-tag color="#f2826a">标签</van-tag>
<van-tag color="#7232dd">标签</van-tag>
<van-tag color="#7232dd" plain>标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
```
### 标签大小
```html
<van-tag type="danger">标签</van-tag>
<van-tag type="danger" size="medium">标签</van-tag>
<van-tag type="danger" size="large">标签</van-tag>
```
### 可关闭标签
@@ -77,22 +51,7 @@ Vue.use(Tag);
添加 `closeable` 属性表示标签是可关闭的,关闭标签时会触发 `close` 事件,在 `close` 事件中可以执行隐藏标签的逻辑。
```html
<van-tag
v-if="show.primary"
closeable
size="medium"
type="primary"
@close="close('primary')"
>
标签
</van-tag>
<van-tag
v-if="show.success"
closeable
size="medium"
type="success"
@close="close('success')"
>
<van-tag v-if="show" closeable size="medium" type="primary" @close="close">
标签
</van-tag>
```
@@ -101,20 +60,37 @@ Vue.use(Tag);
export default {
data() {
return {
show: {
primary: true,
success: true,
},
show: true,
};
},
methods: {
close(type) {
this.show[type] = false;
close() {
this.show = false;
},
},
};
```
### 标签大小
通过 `size` 属性调整标签大小。
```html
<van-tag type="primary">标签</van-tag>
<van-tag type="primary" size="medium">标签</van-tag>
<van-tag type="primary" size="large">标签</van-tag>
```
### 自定义颜色
通过 `color``text-color` 属性设置标签颜色。
```html
<van-tag color="#7232dd">标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
<van-tag color="#7232dd" plain>标签</van-tag>
```
## API
### Props