用于标记关键词和概括主要内容。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
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 |
组件提供了下列 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-border-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-border-radius | var(--van-border-radius-md) | - |
--van-tag-large-font-size | var(--van-font-size-md) | - |
--van-tag-round-border-radius | var(--van-border-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-color | var(--van-white) | - |
介绍基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过icon属性引用。实例演示引入通过以下方式来全局注册组件...
加载数据时显示动效。区域加载在表格等容器中加载数据时显示。constructor(props) {super(props);this.table = {columns: [{labe...
Backtop 回到顶部返回页面顶部的操作按钮基础用法滑动页面即可看到右下方的按钮。templateScroll down to see the bottom-right ...
在Bootstrap4中包含了很多实用的小工具,这些功能能够让你不用写CSS代码就能实现想要的效果,让开发更快捷和简单。边框使用borde...