Vant Tag 标记
引入
import Vue from 'vue';
import { Tag } from 'vant';
Vue.use(Tag);
代码演示
基础用法
通过type属性控制标签颜色,默认为灰色
<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>
圆角样式
通过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设置为标记样式(半圆角)
<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>
空心样式
设置plain属性设置为空心样式
<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>
可关闭标签
添加closeable属性表示标签是可关闭的,关闭标签时会触发close事件,在close事件中可以执行隐藏标签的逻辑
<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;
}
}
}
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 类型,可选值为primary success danger warning | string | default |
size | 大小, 可选值为large medium | string | - |
color | 标签颜色 | string | - |
plain | 是否为空心样式 | boolean | false |
round | 是否为圆角样式 | boolean | false |
mark | 是否为标记样式 | boolean | false |
text-color | 文本颜色,优先级高于color 属性 | string | white |
closeable v2.2.9 | 是否为可关闭标签 | boolean | false |
Slots
名称 | 说明 |
---|---|
default | 标签显示内容 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击时触发 | event: Event |
close | 关闭标签时触发 | - |