| 1 |
- System.register(["./vendor-legacy.7e726cf7.js"],(function(s){"use strict";var a,t,n;return{setters:[function(s){a=s.e,t=s.o,n=s.G}],execute:function(){const l={class:"markdown-body"},p=[n('<h1>Avatar 头像</h1><h3>介绍</h3><p>用来代表用户或事物，支持图片、图标或字符展示。</p><h3>安装</h3><pre><code class="language-javascript"><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> { Avatar } <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> { Avatar } <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(Avatar);\n</code></pre><h2>代码示例</h2><h3>基本用法</h3><p>内置 smal / normal / large 三种尺寸规格</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"large"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-avatar</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"normal"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-avatar</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-avatar</span>></span> \n</code></pre><h3>修改形状类型</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"square"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-avatar</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"round"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-avatar</span>></span>\n</code></pre><h3>修改背景色</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span> <span class="hljs-attr">bg-color</span>=<span class="hljs-string">"#FA2C19"</span> /></span>\n</code></pre><h3>修改背景icon</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"</span> /></span>\n</code></pre><h3>设置头像的文本内容</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-avatar</span>></span>N<span class="hljs-tag"></<span class="hljs-name">nut-avatar</span>></span>\n</code></pre><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>bg-color</td><td>设置头像背景色</td><td>String</td><td>#eee</td></tr><tr><td>size</td><td>设置头像的大小，提供三种：large/normal/small，支持直接输入数字</td><td>String</td><td>normal</td></tr><tr><td>shape</td><td>设置头像的形状，默认是圆形，可以设置为square方形</td><td>String</td><td>round</td></tr><tr><td>icon</td><td>设置头像的icon图标, 类似Icon组件的name属性，支持名称和链接</td><td>String</td><td>‘’</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>回调参数</th></tr></thead><tbody><tr><td>active-avatarror</td><td>点击触发事件</td><td>Function</td><td>event</td></tr></tbody></table>',21)];s("default",{setup:(s,{expose:n})=>(n({frontmatter:{}}),(s,n)=>(t(),a("div",l,p)))})}}}));
|
