import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},d=n(`
\u7528\u4E8E\u6807\u8BB0\u5173\u952E\u8BCD\u548C\u6982\u62EC\u4E3B\u8981\u5185\u5BB9\u3002
\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002
import { createApp } from 'vue';
import { Tag } from 'vant';
const app = createApp();
app.use(Tag);
\u901A\u8FC7 type
\u5C5E\u6027\u63A7\u5236\u6807\u7B7E\u989C\u8272\u3002
<van-tag type="primary">\u6807\u7B7E</van-tag>
<van-tag type="success">\u6807\u7B7E</van-tag>
<van-tag type="danger">\u6807\u7B7E</van-tag>
<van-tag type="warning">\u6807\u7B7E</van-tag>
\u8BBE\u7F6E plain
\u5C5E\u6027\u8BBE\u7F6E\u4E3A\u7A7A\u5FC3\u6837\u5F0F\u3002
<van-tag plain type="primary">\u6807\u7B7E</van-tag>
\u901A\u8FC7 round
\u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002
<van-tag round type="primary">\u6807\u7B7E</van-tag>
\u901A\u8FC7 mark
\u8BBE\u7F6E\u4E3A\u6807\u8BB0\u6837\u5F0F(\u534A\u5706\u89D2)\u3002
<van-tag mark type="primary">\u6807\u7B7E</van-tag>
\u6DFB\u52A0 closeable
\u5C5E\u6027\u8868\u793A\u6807\u7B7E\u662F\u53EF\u5173\u95ED\u7684\uFF0C\u5173\u95ED\u6807\u7B7E\u65F6\u4F1A\u89E6\u53D1 close
\u4E8B\u4EF6\uFF0C\u5728 close
\u4E8B\u4EF6\u4E2D\u53EF\u4EE5\u6267\u884C\u9690\u85CF\u6807\u7B7E\u7684\u903B\u8F91\u3002
<van-tag :show="show" closeable size="medium" type="primary" @close="close">
\u6807\u7B7E
</van-tag>
import { ref } from 'vue';
export default {
setup() {
const show = ref(true);
const close = () => {
show.value = false;
};
return {
show,
close,
};
},
};
\u901A\u8FC7 size
\u5C5E\u6027\u8C03\u6574\u6807\u7B7E\u5927\u5C0F\u3002
<van-tag type="primary">\u6807\u7B7E</van-tag>
<van-tag type="primary" size="medium">\u6807\u7B7E</van-tag>
<van-tag type="primary" size="large">\u6807\u7B7E</van-tag>
\u901A\u8FC7 color
\u548C text-color
\u5C5E\u6027\u8BBE\u7F6E\u6807\u7B7E\u989C\u8272\u3002
<van-tag color="#7232dd">\u6807\u7B7E</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">\u6807\u7B7E</van-tag>
<van-tag color="#7232dd" plain>\u6807\u7B7E</van-tag>
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
type | \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success danger warning | string | default |
size | \u5927\u5C0F, \u53EF\u9009\u503C\u4E3A large medium | string | - |
color | \u6807\u7B7E\u989C\u8272 | string | - |
show | \u662F\u5426\u5C55\u793A\u6807\u7B7E | boolean | true |
plain | \u662F\u5426\u4E3A\u7A7A\u5FC3\u6837\u5F0F | boolean | false |
round | \u662F\u5426\u4E3A\u5706\u89D2\u6837\u5F0F | boolean | false |
mark | \u662F\u5426\u4E3A\u6807\u8BB0\u6837\u5F0F | boolean | false |
text-color | \u6587\u672C\u989C\u8272\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E color \u5C5E\u6027 | string | white |
closeable | \u662F\u5426\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E | boolean | false |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
default | \u6807\u7B7E\u663E\u793A\u5185\u5BB9 |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
click | \u70B9\u51FB\u65F6\u89E6\u53D1 | event: MouseEvent |
close | \u5173\u95ED\u6807\u7B7E\u65F6\u89E6\u53D1 | event: MouseEvent |
\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A
import type { TagSize, TagType, TagProps } from 'vant';
\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002
\u540D\u79F0 | \u9ED8\u8BA4\u503C | \u63CF\u8FF0 |
---|---|---|
--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-background-color-light) | - |