ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: 8ff89d833b
ブランチ タグ
nutui
/
3.1.6
/
doc.5347ea7a.js

doc.5347ea7a.js 5.5 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as t}from"./vendor.9cc7b6f2.js";const n={class:"markdown-body"},l=[t('<h1>Tag 标签</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">&#39;vue&#39;</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Tag } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { Tag } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Tag);\n\n</code></pre><h3>代码实例</h3><h3>基础用法</h3><pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n</code></pre><h3>空心样式</h3><pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">plain</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n</code></pre><h3>圆角样式</h3><pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n</code></pre><h3>标记样式</h3><pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n</code></pre><h3>可关闭标签</h3><pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;show&quot;</span> <span class="hljs-attr">closeable</span>  @<span class="hljs-attr">close</span>=<span class="hljs-string">&quot;close&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n</code></pre><h3>自定义颜色</h3><pre><code class="language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#FA685D&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#E9E9E9&quot;</span> <span class="hljs-attr">text-color</span>=<span class="hljs-string">&quot;#999999&quot;</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">nut-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#FA2400&quot;</span> <span class="hljs-attr">plain</span>&gt;</span>标签<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tag</span>&gt;</span>\n</code></pre><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>标签类型，可选值为primary success danger warning</td><td>String</td><td><code>default</code></td></tr><tr><td>color</td><td>标签颜色</td><td>String</td><td>-</td></tr><tr><td>text-color</td><td>文本颜色，优先级高于color属性</td><td>String</td><td><code>white</code></td></tr><tr><td>plain</td><td>是否为空心样式</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>round</td><td>是否为圆角样式</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>mark</td><td>是否为标记样式</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>closeable</td><td>是否为可关闭标签</td><td>Boolean</td><td><code>false</code></td></tr></tbody></table><h3>Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>标签显示内容</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>close</td><td>关闭事件</td><td>event</td></tr></tbody></table>',24)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
    2.