nutui/3.1.11/doc6.js

import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`<h1>Badge \u5FBD\u6807</h1><h3>\u4ECB\u7ECD</h3><p>\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</p><h3>\u5B89\u88C5</h3><pre><code class="language-javascript">
<span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
<span class="hljs-comment">// vue</span>
<span class="hljs-keyword">import</span> { Badge } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
<span class="hljs-comment">// taro</span>
<span class="hljs-keyword">import</span> { Badge } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;

<span class="hljs-keyword">const</span> app = createApp();
app.use(Badge);

</code></pre><h3>\u4EE3\u7801\u5B9E\u4F8B</h3><h3>\u57FA\u672C\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;76&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;NEW&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">dot</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
</code></pre><h3>\u6700\u5927\u503C</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">&quot;9&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">&quot;20&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">&quot;99&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
</code></pre><h3>\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;8&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;76&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;NEW&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">dot</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
</code></pre><h3>\u81EA\u5B9A\u4E49\u5FBD\u6807\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;Check&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffffff&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;12&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;link&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffffff&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;12&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;download&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffffff&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;12&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
</code></pre><h3>\u81EA\u5B9A\u4E49\u4F4D\u7F6E</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;8&quot;</span> <span class="hljs-attr">top</span>=<span class="hljs-string">&quot;5&quot;</span> <span class="hljs-attr">right</span>=<span class="hljs-string">&quot;5&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;76&quot;</span> <span class="hljs-attr">top</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">right</span>=<span class="hljs-string">&quot;10&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;NEW&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
</code></pre><h3>\u72EC\u7ACB\u5C55\u793A</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;76&quot;</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">nut-badge</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;NEW&quot;</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">nut-badge</span>&gt;</span>
</code></pre><h3>Prop</h3><table><thead><tr><th>\u5B57\u6BB5</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u663E\u793A\u7684\u5185\u5BB9</td><td>String</td><td>-</td></tr><tr><td>max</td><td>value \u4E3A\u6570\u503C\u65F6\uFF0C\u6700\u5927\u503C</td><td>Number</td><td><code>10000</code></td></tr><tr><td>z-index</td><td>\u5FBD\u6807\u7684 z-index \u503C</td><td>Number</td><td><code>10</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u4E3A\u5C0F\u70B9</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>hidden</td><td>\u662F\u5426\u9690\u85CF</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>top</td><td>\u4E0A\u4E0B\u504F\u79FB\u91CF\uFF0C\u652F\u6301\u5355\u4F4D\u8BBE\u7F6E\uFF0C\u53EF\u8BBE\u7F6E\u4E3A\uFF1A5px \u7B49</td><td>Number</td><td><code>0</code></td></tr><tr><td>right</td><td>\u5DE6\u53F3\u504F\u79FB\u91CF\uFF0C\u652F\u6301\u5355\u4F4D\u8BBE\u7F6E\uFF0C\u53EF\u8BBE\u7F6E\u4E3A\uFF1A5px \u7B49</td><td>Number</td><td><code>0</code></td></tr><tr><td>color</td><td>\u5FBD\u6807\u80CC\u666F\u989C\u8272</td><td>String</td><td><code>#fa2c19</code></td></tr></tbody></table><h3>Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>default</td><td>\u5FBD\u6807\u5305\u88F9\u7684\u5B50\u5143\u7D20</td></tr><tr><td>icons</td><td>\u5FBD\u6807\u81EA\u5B9A\u4E49</td></tr></tbody></table>`,22),c=[p],u={setup(h,{expose:s}){return s({frontmatter:{}}),(g,e)=>(n(),a("div",l,c))}};export{u as default};