| 1 |
- import{e as s,o as a,G as n}from"./vendor.9cc7b6f2.js";const l={class:"markdown-body"},t=[n('<h1>Badge 徽标</h1><h3>介绍</h3><p>出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。</p><h3>安装</h3><pre><code class="language-javascript">\n<span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Badge } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { Badge } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Badge);\n\n</code></pre><h3>代码实例</h3><h3>基本用法</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"76"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"NEW"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">isDot</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n</code></pre><h3>最大值</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">"9"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">"99"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n</code></pre><h3>自定义颜色</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-badge</span>\n <span class="hljs-attr">:value</span>=<span class="hljs-string">"8"</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"</span>\n ></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span>\n <span class="hljs-attr">:value</span>=<span class="hljs-string">"76"</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"</span>\n ></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"NEW"</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"</span>\n ></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span>\n <span class="hljs-attr">isDot</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"</span>\n ></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n</code></pre><h3>自定义徽标内容</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"Check"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#ffffff"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"12"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-icon</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"link"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#ffffff"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"12"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-icon</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">icons</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"download"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#ffffff"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"12"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-icon</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n</code></pre><h3>自定义位置</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">top</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">right</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span></div >\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"76"</span> <span class="hljs-attr">top</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">right</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"NEW"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo-svg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n</code></pre><h3>独立展示</h3><pre><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span> <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"76"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span> <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-badge</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"NEW"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span> <span class="hljs-tag"></<span class="hljs-name">nut-badge</span>></span>\n</code></pre><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>显示的内容</td><td>String</td><td>-</td></tr><tr><td>max</td><td>value 为数值时，最大值</td><td>Number</td><td><code>10000</code></td></tr><tr><td>z-index</td><td>徽标的 z-index 值</td><td>Number</td><td><code>10</code></td></tr><tr><td>isDot</td><td>是否为小点</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>hidden</td><td>是否隐藏</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>top</td><td>上下偏移量，支持单位设置，可设置为：5px 等</td><td>Number</td><td><code>0</code></td></tr><tr><td>right</td><td>左右偏移量，支持单位设置，可设置为：5px 等</td><td>Number</td><td><code>0</code></td></tr></tbody></table>',20)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",l,t)))};export{p as default};
|
