import{e as a,o as n,G as t}from"./vendor.36d75c4a.js";const l={class:"markdown-body"},p=t(`

Badge \u5FBD\u6807

\u4ECB\u7ECD

\u51FA\u73B0\u5728\u56FE\u6807\u6216\u6587\u5B57\u53F3\u4E0A\u89D2\u7684\u7EA2\u8272\u5706\u70B9\u3001\u6570\u5B57\u6216\u8005\u6587\u5B57\uFF0C\u8868\u793A\u6709\u65B0\u5185\u5BB9\u6216\u8005\u5F85\u5904\u7406\u7684\u4FE1\u606F\u3002

\u5B89\u88C5


import { createApp } from 'vue';
// vue
import { Badge } from '@nutui/nutui';
// taro
import { Badge } from '@nutui/nutui-taro';

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

\u4EE3\u7801\u5B9E\u4F8B

\u57FA\u672C\u7528\u6CD5

<nut-badge :value="8">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot>
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>

\u6700\u5927\u503C

<nut-badge :value="200" :max="9">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="200" :max="20">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="200" :max="99">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>

\u81EA\u5B9A\u4E49\u989C\u8272

<nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>

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

<nut-badge>
  <template #icons>
    <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
  </template>
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge>
  <template #icons>
    <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
  </template>
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge>
  <template #icons>
    <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
  </template>
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>

\u81EA\u5B9A\u4E49\u4F4D\u7F6E

<nut-badge :value="8" top="5" right="5">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge :value="76" top="10" right="10">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>
<nut-badge value="NEW">
  <nut-avatar icon="my" shape="square"></nut-avatar>
</nut-badge>

\u72EC\u7ACB\u5C55\u793A

<nut-badge :value="8"> </nut-badge>
<nut-badge :value="76"> </nut-badge>
<nut-badge value="NEW"> </nut-badge>

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
value	\u663E\u793A\u7684\u5185\u5BB9	String	-
max	value \u4E3A\u6570\u503C\u65F6\uFF0C\u6700\u5927\u503C	Number	`10000`
z-index	\u5FBD\u6807\u7684 z-index \u503C	Number	`10`
dot	\u662F\u5426\u4E3A\u5C0F\u70B9	Boolean	`false`
hidden	\u662F\u5426\u9690\u85CF	Boolean	`false`
top	\u4E0A\u4E0B\u504F\u79FB\u91CF\uFF0C\u652F\u6301\u5355\u4F4D\u8BBE\u7F6E\uFF0C\u53EF\u8BBE\u7F6E\u4E3A\uFF1A5px \u7B49	Number	`0`
right	\u5DE6\u53F3\u504F\u79FB\u91CF\uFF0C\u652F\u6301\u5355\u4F4D\u8BBE\u7F6E\uFF0C\u53EF\u8BBE\u7F6E\u4E3A\uFF1A5px \u7B49	Number	`0`
color	\u5FBD\u6807\u80CC\u666F\u989C\u8272	String	`#fa2c19`

Slots

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

`,22),c=[p],u={setup(h,{expose:s}){return s({frontmatter:{}}),(g,e)=>(n(),a("div",l,c))}};export{u as default};