import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},p=t(`

Badge \u5FBD\u6807

\u4ECB\u7ECD

\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u5FBD\u6807\u6570\u5B57\u6216\u5C0F\u7EA2\u70B9\u3002

\u5F15\u5165

\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 { Badge } from 'vant';

const app = createApp();
app.use(Badge);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u8BBE\u7F6E content \u5C5E\u6027\u540E\uFF0CBadge \u4F1A\u5728\u5B50\u5143\u7D20\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5BF9\u5E94\u7684\u5FBD\u6807\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7 dot \u6765\u663E\u793A\u5C0F\u7EA2\u70B9\u3002

<van-badge :content="5">
  <div class="child" />
</van-badge>
<van-badge :content="10">
  <div class="child" />
</van-badge>
<van-badge content="Hot">
  <div class="child" />
</van-badge>
<van-badge dot>
  <div class="child" />
</van-badge>

<style>
  .child {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
  }
</style>

\u6700\u5927\u503C

\u8BBE\u7F6E max \u5C5E\u6027\u540E\uFF0C\u5F53 content \u7684\u6570\u503C\u8D85\u8FC7\u6700\u5927\u503C\u65F6\uFF0C\u4F1A\u81EA\u52A8\u663E\u793A\u4E3A {max}+\u3002

<van-badge :content="20" max="9">
  <div class="child" />
</van-badge>
<van-badge :content="50" max="20">
  <div class="child" />
</van-badge>
<van-badge :content="200" max="99">
  <div class="child" />
</van-badge>

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7 color \u5C5E\u6027\u6765\u8BBE\u7F6E\u5FBD\u6807\u7684\u989C\u8272\u3002

<van-badge :content="5" color="#1989fa">
  <div class="child" />
</van-badge>
<van-badge :content="10" color="#1989fa">
  <div class="child" />
</van-badge>
<van-badge dot color="#1989fa">
  <div class="child" />
</van-badge>

\u81EA\u5B9A\u4E49\u5FBD\u6807\u5185\u5BB9

\u901A\u8FC7 content \u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5185\u5BB9\uFF0C\u6BD4\u5982\u63D2\u5165\u4E00\u4E2A\u56FE\u6807\u3002

<van-badge>
  <div class="child" />
  <template #content>
    <van-icon name="success" class="badge-icon" />
  </template>
</van-badge>
<van-badge>
  <div class="child" />
  <template #content>
    <van-icon name="cross" class="badge-icon" />
  </template>
</van-badge>
<van-badge>
  <div class="child" />
  <template #content>
    <van-icon name="down" class="badge-icon" />
  </template>
</van-badge>

.badge-icon {
  display: block;
  font-size: 10px;
  line-height: 16px;
}

\u81EA\u5B9A\u4E49\u5FBD\u6807\u4F4D\u7F6E

\u901A\u8FC7 position \u5C5E\u6027\u6765\u8BBE\u7F6E\u5FBD\u6807\u7684\u4F4D\u7F6E\u3002

<van-badge :content="10" position="top-left">
  <div class="child" />
</van-badge>
<van-badge :content="10" position="bottom-left">
  <div class="child" />
</van-badge>
<van-badge :content="10" position="bottom-right">
  <div class="child" />
</van-badge>

\u72EC\u7ACB\u5C55\u793A

\u5F53 Badge \u6CA1\u6709\u5B50\u5143\u7D20\u65F6\uFF0C\u4F1A\u4F5C\u4E3A\u4E00\u4E2A\u72EC\u7ACB\u7684\u5143\u7D20\u8FDB\u884C\u5C55\u793A\u3002

<van-badge :content="20" />

<van-badge :content="200" max="99" />

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
content\u5FBD\u6807\u5185\u5BB9number | string-
color\u5FBD\u6807\u80CC\u666F\u989C\u8272string#ee0a24
dot\u662F\u5426\u5C55\u793A\u4E3A\u5C0F\u7EA2\u70B9booleanfalse
max\u6700\u5927\u503C\uFF0C\u8D85\u8FC7\u6700\u5927\u503C\u4F1A\u663E\u793A {max}+\uFF0C\u4EC5\u5F53 content \u4E3A\u6570\u5B57\u65F6\u6709\u6548number | string-
offset v3.0.5\u8BBE\u7F6E\u5FBD\u6807\u7684\u504F\u79FB\u91CF\uFF0C\u6570\u7EC4\u7684\u4E24\u9879\u5206\u522B\u5BF9\u5E94\u6C34\u5E73\u548C\u5782\u76F4\u65B9\u5411\u7684\u504F\u79FB\u91CF\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px[number | string, number | string]-
show-zero v3.0.10\u5F53 content \u4E3A\u6570\u5B57 0 \u6216\u5B57\u7B26\u4E32 '0' \u65F6\uFF0C\u662F\u5426\u5C55\u793A\u5FBD\u6807booleantrue
position v3.2.7\u5FBD\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-rightstringtop-right

Slots

\u540D\u79F0\u8BF4\u660E
default\u5FBD\u6807\u5305\u88F9\u7684\u5B50\u5143\u7D20
content\u81EA\u5B9A\u4E49\u5FBD\u6807\u5185\u5BB9

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type { BadgeProps, BadgePosition } from 'vant';

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\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-badge-size16px-
--van-badge-colorvar(--van-white)-
--van-badge-padding0 3px-
--van-badge-font-sizevar(--van-font-size-sm)-
--van-badge-font-weightvar(--van-font-weight-bold)-
--van-badge-border-widthvar(--van-border-width-base)-
--van-badge-background-colorvar(--van-danger-color)-
--van-badge-dot-colorvar(--van-danger-color)-
--van-badge-dot-size8px-
--van-badge-font-family-apple-system-font, Helvetica Neue, Arial, sans-serif-
`,16),c=[p],r={__name:"README.zh-CN",setup(e,{expose:s}){return s({frontmatter:{}}),(h,o)=>(a(),n("div",l,c))}};export{r as default};