May 07, 2021 Vant
import Vue from 'vue';
import { Tag } from 'vant';
Vue.use(Tag);
The label color is controlled by the type property, which defaults to gray
<van-tag>标签</van-tag>
<van-tag type="primary">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="warning">标签</van-tag>
Set to fillet style by round
<van-tag round>标签</van-tag>
<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>
Mark style by mark (half fillet)
<van-tag mark>标签</van-tag>
<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>
Set theplain property to a hollow style
<van-tag plain>标签</van-tag>
<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>
<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>
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="danger" size="medium">标签</van-tag>
<van-tag type="danger" size="large">标签</van-tag>
Adding a closeable property indicates that the label can be turned off, that the close event is triggered when the label is closed, and that the logic of hiding the label can be executed in the close event
<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>
export default {
data() {
return {
show: {
primary: true,
success: true
}
}
},
methods: {
close(type) {
this.show[type] = false;
}
}
}
Parameters | Description | Type | The default |
---|---|---|---|
type |
Type, optional value is
primary
success
danger
warning
|
string |
default
|
size |
Size, the optional value
large
medium
|
string | - |
color | Label color | string | - |
plain | Whether it is a hollow style | boolean |
false
|
round | Whether it's a fillet style | boolean |
false
|
mark | Whether it is a markup style | boolean |
false
|
text-color |
Text color, priority over
color
property
|
string |
white
|
closeable
v2.2.9
|
Whether the label can be turned off | boolean |
false
|
Name | Description |
---|---|
default | The label displays the contents |
The name of the event | Description | Callback parameters |
---|---|---|
Click | Triggered when clicked | event: Event |
close | Triggered when the label is closed | - |