用于标记关键词和概括主要内容。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import { Tag } from "vant";
const app = createApp();
app.use(Tag);
通过 type
属性控制标签颜色。
<van-tag type="primary">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="warning">标签</van-tag>
设置 plain
属性设置为空心样式。
<van-tag plain type="primary">标签</van-tag>
通过 round
设置为圆角样式。
<van-tag round type="primary">标签</van-tag>
通过 mark
设置为标记样式(半圆角)。
<van-tag mark type="primary">标签</van-tag>
添加 closeable
属性表示标签是可关闭的,关闭标签时会触发 close
事件,在 close
事件中可以执行隐藏标签的逻辑。
<van-tag :show="show" closeable size="medium" type="primary" @close="close">
标签
</van-tag>
import { ref } from "vue";
export default {
setup() {
const show = ref(true);
const close = () => {
show.value = false;
};
return {
show,
close,
};
},
};
通过 size
属性调整标签大小。
<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
属性设置标签颜色。
<van-tag color="#7232dd">标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
<van-tag color="#7232dd" plain>标签</van-tag>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 类型,可选值为 primary success danger warning
|
string | default
|
size | 大小, 可选值为 large medium
|
string | - |
color | 标签颜色 | string | - |
show | 是否展示标签 | boolean | true
|
plain | 是否为空心样式 | boolean | false
|
round | 是否为圆角样式 | boolean | false
|
mark | 是否为标记样式 | boolean | false
|
text-color | 文本颜色,优先级高于 color 属性 |
string | white
|
closeable | 是否为可关闭标签 | boolean | false
|
名称 | 说明 |
---|---|
default | 标签显示内容 |
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击时触发 | event: MouseEvent |
close | 关闭标签时触发 | event: MouseEvent |
组件导出以下类型定义:
import type { TagSize, TagType, TagProps } from "vant";
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-tag-padding | 0 var(--van-padding-base) | - |
--van-tag-text-color | var(--van-white) | - |
--van-tag-font-size | var(--van-font-size-sm) | - |
--van-tag-radius | 2px | - |
--van-tag-line-height | 16px | - |
--van-tag-medium-padding | 2px 6px | - |
--van-tag-large-padding | var(--van-padding-base) var(--van-padding-xs) | - |
--van-tag-large-radius | var(--van-radius-md) | - |
--van-tag-large-font-size | var(--van-font-size-md) | - |
--van-tag-round-radius | var(--van-radius-max) | - |
--van-tag-danger-color | var(--van-danger-color) | - |
--van-tag-primary-color | var(--van-primary-color) | - |
--van-tag-success-color | var(--van-success-color) | - |
--van-tag-warning-color | var(--van-warning-color) | - |
--van-tag-default-color | var(--van-gray-6) | - |
--van-tag-plain-background | var(--van-background-2) | - |
介绍Vant 是基于有赞Zan Design System视觉规范实现的组件库,在这里可以下载 Vant 的设计资源。设计稿组件设计稿(Sketch)包含...
介绍日历组件用于选择日期或日期区间。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createA...
介绍用户可以在文本框内输入或编辑文字。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { creat...
介绍建立父子组件之间的关联关系,进行数据通信和方法调用,基于provide和inject实现。代码演示基本用法在父组件中使用useChildr...
介绍用于搜索场景的输入框组件。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } f...
介绍用于优惠券的兑换和选择。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } fro...
介绍用于从一组相关联的数据集合中进行选择。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { c...