docs(Tag): update demo (#7020)
This commit is contained in:
+32
-56
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user