Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: 127760cdcd
Branches Tags
nutui
/
assets
/
doc-legacy.4d69052d.js

doc-legacy.4d69052d.js 2.9 KB
History Raw

1 
  1. System.register(["./vendor-legacy.466e82dd.js"],(function(t){"use strict";var a,r,e;return{setters:[function(t){a=t.c,r=t.o,e=t.C}],execute:function(){const d={class:"markdown-body"},n=e('<h1>Avatar 头像</h1><h3>介绍</h3><p>用来代表用户或事物，支持图片、图标或字符展示。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\n// vue\nimport { Avatar } from &#39;@nutui/nutui&#39;;\n// taro\nimport { Avatar } from &#39;@nutui/nutui-taro&#39;;\n\nconst app = createApp();\napp.use(Avatar);\n</code></pre><h2>代码示例</h2><h3>基本用法</h3><p>内置 smal / normal / large 三种尺寸规格</p><pre><code class="language-html">&lt;nut-avatar size=&quot;large&quot; src=&quot;https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png&quot;\n&gt;&lt;/nut-avatar&gt;\n&lt;nut-avatar size=&quot;normal&quot; src=&quot;https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png&quot;\n&gt;&lt;/nut-avatar&gt;\n&lt;nut-avatar size=&quot;small&quot; src=&quot;https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png&quot;\n&gt;&lt;/nut-avatar&gt;  \n</code></pre><h3>修改形状类型</h3><pre><code class="language-html">&lt;nut-avatar shape=&quot;square&quot;&gt;&lt;/nut-avatar&gt;\n&lt;nut-avatar shape=&quot;round&quot;&gt;&lt;/nut-avatar&gt;\n</code></pre><h3>修改背景色</h3><pre><code class="language-html">&lt;nut-avatar bg-color=&quot;#f0250f&quot;&gt;&lt;/nut-avatar&gt;\n</code></pre><h3>修改背景icon</h3><pre><code class="language-html">&lt;nut-avatar icon=&quot;https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png&quot;&gt;&lt;/nut-avatar&gt;\n</code></pre><h3>设置头像的文本内容</h3><pre><code class="language-html">&lt;nut-avatar icon&gt;N&lt;/nut-avatar&gt;\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>src</td><td>设置头像的背景图片</td><td>String</td><td>‘’</td></tr><tr><td>icon</td><td>设置头像的icon图标, 优先级低于src,类似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);t("default",{setup:t=>(t,e)=>(r(),a("div",d,[n]))})}}}));
    2.