/*! For license information please see 6915.6cc05c40.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["6915"],{57164:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Badge \u5FBD\u6807

\n

\u4ECB\u7ECD

\n

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

\n

\u5F15\u5165

\n

\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

\n
import { createApp } from 'vue';\nimport { Badge } from 'vant';\n\nconst app = createApp();\napp.use(Badge);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\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

\n
<van-badge :content="5">\n  <div class="child" />\n</van-badge>\n<van-badge :content="10">\n  <div class="child" />\n</van-badge>\n<van-badge content="Hot">\n  <div class="child" />\n</van-badge>\n<van-badge dot>\n  <div class="child" />\n</van-badge>\n\n<style>\n  .child {\n    width: 40px;\n    height: 40px;\n    background: #f2f3f5;\n    border-radius: 4px;\n  }\n</style>\n
\n

\u6700\u5927\u503C

\n

\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

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

\u81EA\u5B9A\u4E49\u989C\u8272

\n

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

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

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

\n

\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

\n
<van-badge>\n  <div class="child" />\n  <template #content>\n    <van-icon name="success" class="badge-icon" />\n  </template>\n</van-badge>\n<van-badge>\n  <div class="child" />\n  <template #content>\n    <van-icon name="cross" class="badge-icon" />\n  </template>\n</van-badge>\n<van-badge>\n  <div class="child" />\n  <template #content>\n    <van-icon name="down" class="badge-icon" />\n  </template>\n</van-badge>\n
\n
.badge-icon {\n  display: block;\n  font-size: 10px;\n  line-height: 16px;\n}\n
\n

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

\n

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

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

\u72EC\u7ACB\u5C55\u793A

\n

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

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

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\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\u8BBE\u7F6E\u5FBD\u6807\u7684\u504F\u79FB\u91CF\uFF0C\u6570\u7EC4\u7684\u4E24\u9879\u5206\u522B\u5BF9\u5E94\u6C34\u5E73\u5411\u53F3\u548C\u5782\u76F4\u5411\u4E0B\u65B9\u5411\u7684\u504F\u79FB\u91CF\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px[number | string, number | string]-
show-zero\u5F53 content \u4E3A\u6570\u5B57 0 \u6216\u5B57\u7B26\u4E32 \'0\' \u65F6\uFF0C\u662F\u5426\u5C55\u793A\u5FBD\u6807booleantrue
position\u5FBD\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left bottom-left bottom-rightstringtop-right
\n

Slots

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

\u7C7B\u578B\u5B9A\u4E49

\n

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

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

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\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-bold)-
--van-badge-border-widthvar(--van-border-width)-
--van-badge-backgroundvar(--van-danger-color)-
--van-badge-dot-colorvar(--van-danger-color)-
--van-badge-dot-size8px-
--van-badge-font-apple-system-font, Helvetica Neue, Arial, sans-serif-
\n
'},null,8,l))}}}]);