| 1 |
- import{c as t,o as a,A as r}from"./vendor.91b30fe3.js";const e={class:"markdown-body"},d=r('<h1>Avatar 头像</h1><h3>介绍</h3><p>用来代表用户或事物，支持图片、图标或字符展示。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Avatar } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Avatar);\n\n</code></pre><h2>代码示例</h2><h3>基本用法</h3><p>内置 smal / normal / large 三种尺寸规格</p><pre><code class="language-html"><nut-avatar size="large"></nut-avatar>\n<nut-avatar size="normal"></nut-avatar>\n<nut-avatar size="small"></nut-avatar>\n</code></pre><h3>修改形状类型</h3><pre><code class="language-html"><nut-avatar size="large" shape="square"></nut-avatar>\n<nut-avatar size="normal" shape="square"></nut-avatar>\n<nut-avatar size="small" shape="square"></nut-avatar>\n</code></pre><h3>修改背景色</h3><pre><code class="language-html"><nut-avatar bg-color="#f0250f"></nut-avatar>\n</code></pre><h3>设置头像的文本内容</h3><pre><code class="language-html"><nut-avatar size="large" bg-icon>U</nut-avatar>\n</code></pre><h3>设置背景图片</h3><pre><code class="language-html"><nut-avatar\n bg-icon\n bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"\n></nut-avatar>\n</code></pre><h3>设置头像ICON图标</h3><pre><code class="language-html"><nut-avatar\n bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"\n></nut-avatar>\n</code></pre><h3>点击头像有触发事件</h3><pre><code class="language-html"><nut-avatar @active-avatar="activeAvatar"></nut-avatar>\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>bg-image</td><td>设置头像的背景图片</td><td>String</td><td>–</td></tr><tr><td>bg-icon</td><td>设置头像的icon图标</td><td>String</td><td>默认based64格式的头像图片</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>active-avatar</td><td>点击头像触发事件</td><td>Function</td><td>–</td></tr></tbody></table>',25),o={expose:[],setup:r=>(r,o)=>(a(),t("div",e,[d]))};export default o;
|
