refactor: 头像组件优化

src/packages/avatar/demo.vue

@@ -5,47 +5,36 @@
     <nut-cell>
       <nut-avatar
         size="80"
-        bg-icon
         bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       ></nut-avatar>
       <nut-avatar
         size="large"
-        bg-icon
         bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       ></nut-avatar>
       <nut-avatar
         size="normal"
-        bg-icon
         bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       ></nut-avatar>
       <nut-avatar
         size="small"
-        bg-icon
         bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       ></nut-avatar>
     </nut-cell>
-    <!-- <h2>修改形状类型</h2>
-    <nut-cell>
-      <nut-avatar size="large" shape="square"></nut-avatar>
-      <nut-avatar size="normal" shape="square"></nut-avatar>
-      <nut-avatar size="small" shape="square"></nut-avatar>
-    </nut-cell> -->
     <h2>修改背景色</h2>
     <nut-cell>
       <nut-avatar bg-color="#FA2C19"></nut-avatar>
     </nut-cell>
-    <h2>修改背景图片</h2>
+    <h2>修改背景Icon</h2>
     <nut-cell>
       <nut-avatar
-        bg-icon
-        bg-image="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+        bg-icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
       ></nut-avatar>
     </nut-cell>
     <h2>可以修改头像的内容</h2>
     <nut-cell>
       <nut-avatar bg-icon>N</nut-avatar>
     </nut-cell>
-    <h2>点击头像有触发事件</h2>
+    <h2>点击头像，触发事件</h2>
     <nut-cell>
       <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
     </nut-cell>
@@ -58,7 +47,7 @@ export default createDemo({
   props: {},
   setup() {
     const activeAvatar = (event: Event) => {
-      console.log('点击了头像', event);
+      alert('点击了头像');
     };
     return {
       activeAvatar

src/packages/avatar/doc.md

@@ -64,7 +64,7 @@ app.use(Avatar);
 ></nut-avatar>
 ```
 
-### 点击头像有触发事件
+### 点击头像，触发事件
 
 ``` html
 <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
@@ -75,13 +75,13 @@ app.use(Avatar);
 | 字段 |说明|类型|默认值|
 |--|--|--|--|
 |bg-color|设置头像背景色|String|#eee
-size|设置头像的大小，提供三种：large/normal/small|String|normal
-shape|设置头像的形状，默认是圆形，可以设置为square方形|String|round
-bg-image|设置头像的背景图片|String|--
-bg-icon|设置头像的icon图标|String|默认based64格式的头像图片
+|size|设置头像的大小，提供三种：large/normal/small|String|normal
+|shape|设置头像的形状，默认是圆形，可以设置为square方形|String|round
+|bg-image|设置头像的背景图片|String|''
+|bg-icon|设置头像的icon图标, 优先级低于bg-image,类似Icon组件的name属性，支持名称和链接|String|''
 
 ### Events
 
-|字段|说明|类型|默认值|
+|字段|说明|类型|回调参数|
 |--|--|--|--|
-|active-avatar|点击头像触发事件|Function|--|
+|active-avatar|点击头像触发事件|Function|event|

src/packages/avatar/index.scss

@@ -7,8 +7,6 @@
   margin-right: 24px;
   flex: 0 0 auto; // 防止被压缩
   .icon {
-    width: 50%;
-    height: 50%;
     background-size: 100% 100%;
     position: absolute;
     top: 50%;
@@ -24,23 +22,23 @@
   }
 }
 .avatar-large {
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
+  width: $avatar-large-width;
+  height: $avatar-large-height;
+  line-height: $avatar-large-height;
 }
 .avatar-small {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
+  width: $avatar-small-width;
+  height: $avatar-small-height;
+  line-height: $avatar-small-height;
 }
 .avatar-normal {
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+  line-height: $avatar-normal-height;
 }
 .avatar-round {
   border-radius: 50%;
 }
 .avatar-square {
-  border-radius: 5px;
+  border-radius: $avatar-square;
 }

src/styles/variables.scss

@@ -132,6 +132,15 @@ $shortpsd-forget: rgba(128, 128, 128, 1);
 //price
 $price-big-size: 24px;
 
+//avatar
+$avatar-square: 5px;
+$avatar-large-width: 60px;
+$avatar-large-height: 60px;
+$avatar-small-width: 32px;
+$avatar-small-height: 32px;
+$avatar-normal-width: 40px;
+$avatar-normal-height: 40px;
+
 // calendar
 $calendar-primary-color: $primary-color;
 $calendar-choose-color: #fef6f6;