Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: c07d6c4e18
Branches Tags
nutui
/
3.1.10
/
doc4.js

doc4.js 5.3 KB
History Raw

123456789101112131415161718192021 
  1. import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`<h1>Avatar \u5934\u50CF</h1><h3>\u4ECB\u7ECD</h3><p>\u7528\u6765\u4EE3\u8868\u7528\u6237\u6216\u4E8B\u7269\uFF0C\u652F\u6301\u56FE\u7247\u3001\u56FE\u6807\u6216\u5B57\u7B26\u5C55\u793A\u3002</p><h3>\u5B89\u88C5</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    2. 

  2. <span class="hljs-comment">// vue</span>
    3. 

  3. <span class="hljs-keyword">import</span> { Avatar,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    4. 

  4. <span class="hljs-comment">// taro</span>
    5. 

  5. <span class="hljs-keyword">import</span> { Avatar,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;
    6. 

  6. 

  7. <span class="hljs-keyword">const</span> app = createApp();
    8. 

  8. app.use(Avatar);
    9. 

  9. app.use(Icon);
    10. 

  10. </code></pre><h3>\u57FA\u672C\u7528\u6CD5</h3><p>\u5185\u7F6E smal / normal / large \u4E09\u79CD\u5C3A\u5BF8\u89C4\u683C</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png&quot;</span>
    11. 

  11. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
    12. 

  12. <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;normal&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png&quot;</span>
    13. 

  13. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
    14. 

  14. <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png&quot;</span>
    15. 

  15. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>  
    16. 

  16. </code></pre><h3>\u4FEE\u6539\u5F62\u72B6\u7C7B\u578B</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
    17. 

  17. <span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;round&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
    18. 

  18. </code></pre><h3>\u4FEE\u6539\u80CC\u666F\u8272</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span> <span class="hljs-attr">bg-color</span>=<span class="hljs-string">&quot;#FA2C19&quot;</span> /&gt;</span>
    19. 

  19. </code></pre><h3>\u4FEE\u6539\u80CC\u666Ficon</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png&quot;</span> /&gt;</span>
    20. 

  20. </code></pre><h3>\u8BBE\u7F6E\u5934\u50CF\u7684\u6587\u672C\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-avatar</span>&gt;</span>N<span class="hljs-tag">&lt;/<span class="hljs-name">nut-avatar</span>&gt;</span>
    21. 

  21. </code></pre><h3>Prop</h3><table><thead><tr><th>\u5B57\u6BB5</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>bg-color</td><td>\u8BBE\u7F6E\u5934\u50CF\u80CC\u666F\u8272</td><td>String</td><td>#eee</td></tr><tr><td>size</td><td>\u8BBE\u7F6E\u5934\u50CF\u7684\u5927\u5C0F\uFF0C\u63D0\u4F9B\u4E09\u79CD\uFF1Alarge/normal/small\uFF0C\u652F\u6301\u76F4\u63A5\u8F93\u5165\u6570\u5B57</td><td>String</td><td>normal</td></tr><tr><td>shape</td><td>\u8BBE\u7F6E\u5934\u50CF\u7684\u5F62\u72B6\uFF0C\u9ED8\u8BA4\u662F\u5706\u5F62\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3Asquare\u65B9\u5F62</td><td>String</td><td>round</td></tr><tr><td>icon</td><td>\u8BBE\u7F6E\u5934\u50CF\u7684icon\u56FE\u6807, \u7C7B\u4F3CIcon\u7EC4\u4EF6\u7684name\u5C5E\u6027\uFF0C\u652F\u6301\u540D\u79F0\u548C\u94FE\u63A5</td><td>String</td><td>\u2018\u2019</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>\u5B57\u6BB5</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>active-avatarror</td><td>\u70B9\u51FB\u89E6\u53D1\u4E8B\u4EF6</td><td>Function</td><td>event</td></tr></tbody></table>`,20),c=[p],g={setup(r,{expose:s}){return s({frontmatter:{}}),(o,e)=>(t(),a("div",l,c))}};export{g as default};
    22.