feat: 优化avatar组件

package.json

@@ -17,7 +17,7 @@
     "build:site": "nutui-cli build-site",
     "clean": "nutui-cli clean",
     "add": "nutui-cli add",
-    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/**/__test__/**.spec.js",
+    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/avatar/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch",
     "prettier:fix": "prettier --write src/**/*.{js,vue,scss}",

src/packages/avatar/__test__/avatar.spec.js

@@ -6,39 +6,20 @@ import Vue from 'vue';
 describe('Avatar.vue', () => {
     const wrapper = shallowMount(avatar, {
     });
-    it('尺寸规格', () => {
-        wrapper.setProps({size: "small" });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-avatar').contains('.avatar-small')).toBe(true);
-        })
-    });
 
-    it('形状类型是否为square', () => {
-        wrapper.setProps({shape: "square" });
+    it('设置头像图片的地址', () => {
+        wrapper.setProps({bgImage: "http://image.png" });
         return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-avatar').contains('.avatar-square')).toBe(true);
+            expect(wrapper.find('.icon').attributes('src')).toBe('http://image.png');
         })
     });
 
-    it('背景颜色是否为red', () => {
-        wrapper.setProps({bgColor: "red" });
+    it('设置头像图片的大小', () => {
+        wrapper.setProps({sizeNum: "50" });
         return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-avatar').hasStyle('background-color','red')).toBe(true);
+            expect(wrapper.find('.nut-avatar').hasStyle('width','50px')).toBe(true);
         })
     });
 
-    it('背景图片是否为设置的bgImage', () => {
-        wrapper.setProps({bgImage: "http://image.png" });
-        return Vue.nextTick().then(function () {
-            // console.log(wrapper.find('.nut-avatar').attributes('style'))
-            expect(wrapper.find('.nut-avatar').hasStyle('background-image','url(http://image.png)')).toBe(true);
-        })
-    });
 
-    it('头像图片是否为设置的bgIcon', () => {
-        wrapper.setProps({bgIcon: "http://image.png" });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.icon').hasStyle('background-image','url(http://image.png)')).toBe(true);
-        })
-    });
 });

src/packages/avatar/avatar.scss

@@ -5,48 +5,14 @@
 	display: inline-block;
 	position: relative;
 	margin-right: 10px;
-
 	.icon {
-		width: 50%;
-		height: 50%;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
 		background-size: 100% 100%;
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
-
-	.text {
-		display: inline-block;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		overflow: hidden;
-	}
-}
-
-.avatar-large {
-	width: 40px;
-	height: 40px;
-	line-height: 40px;
-}
-
-.avatar-small {
-	width: 24px;
-	height: 24px;
-	line-height: 24px;
-}
-
-.avatar-normal {
-	width: 32px;
-	height: 32px;
-	line-height: 32px;
-}
-
-.avatar-round {
-	border-radius: 50%;
-}
-
-.avatar-square {
-	border-radius: 5px;
 }

src/packages/avatar/demo.vue

@@ -1,37 +1,21 @@
 <template>
   <div class="demo-list">
     <h4>默认用法</h4>
-    <p>内置"small","normal","large"三种尺寸规格</p>
     <div class="white-bg">
-      <nut-avatar size="large"></nut-avatar>
-      <nut-avatar size="normal"></nut-avatar>
-      <nut-avatar size="small"></nut-avatar>
+      <nut-avatar size-num="80" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar"></nut-avatar>
     </div>
-    <h4>修改形状类型</h4>
-    <div class="white-bg">
-      <nut-avatar size="large" shape="square"></nut-avatar>
-      <nut-avatar size="normal" shape="square"></nut-avatar>
-      <nut-avatar size="small" shape="square"></nut-avatar>
-    </div>
-    <h4>修改背景色</h4>
-    <div class="white-bg">
-      <nut-avatar bg-color="#f0250f"></nut-avatar>
-    </div>
-    <h4>可以修改头像的内容</h4>
-    <div class="white-bg">
-      <nut-avatar size="large" bg-icon>U</nut-avatar>
-    </div>
-    <h4>修改背景图片</h4>
-    <div class="white-bg">
-      <nut-avatar bg-icon bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
-    </div>
-    <h4>修改头像ICON图标</h4>
-    <div class="white-bg">
-      <nut-avatar bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar>
-    </div>
-    <h4>点击头像有触发事件</h4>
+
+    <h4>带徽标的头像</h4>
     <div class="white-bg">
-      <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
+      <nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+        <nut-badge :value="9"  :max="99" class="item" top="5px" right="10px" ></nut-badge>
+      </nut-avatar>
+      <nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+         <nut-badge :isDot="true" top="5px" right="6px" ></nut-badge>
+      </nut-avatar>
     </div>
   </div>
 </template>
@@ -52,8 +36,15 @@ export default {
 <style lang="scss" scoped>
 .white-bg {
 	padding: 10px;
-	background: #fff;
-	display: flex;
-	align-items: center;
+  background: #fff;
+  display: flex;
+  align-items: flex-end;
+  .nut-avatar{
+    margin-right: 23px;
+  }
+  .nut-badge{
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

src/packages/avatar/doc.md

@@ -2,71 +2,41 @@
 
 用来代表用户或事物，支持图片、图标或字符展示。
 
-## 基本用法
+## 默认用法
 
-内置 **smal** / **normal** / **large** 三种尺寸规格
+size-num 为头像的大小，表示宽高；bg-image表示引入头像图片的路径
 
 ```html
-<nut-avatar size="large"></nut-avatar>
-<nut-avatar size="normal"></nut-avatar>
-<nut-avatar size="small"></nut-avatar>
+<nut-avatar size-num="80" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
+<nut-avatar size-num="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
+<nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
+<nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')"></nut-avatar>
 ```
 
-## 修改形状类型
+## 带徽标的头像
 
-```html
-<nut-avatar size="large" shape="square"></nut-avatar>
-<nut-avatar size="normal" shape="square"></nut-avatar>
-<nut-avatar size="small" shape="square"></nut-avatar>
-```
-
-## 修改背景色
+支持slot，需引入badge组件，点击头像有触发事件
 
 ```html
-<nut-avatar bg-color="#f0250f"></nut-avatar>
+<nut-avatar size-num="40" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+  <nut-badge :value="9"  :max="99" class="item" top="5px" right="10px" ></nut-badge>
+</nut-avatar>
+<nut-avatar size-num="32" :bg-image="require('../../assets/img/cell-avatar.jpeg')" @active-avatar="activeAvatar">
+    <nut-badge :isDot="true" top="5px" right="6px" ></nut-badge>
+</nut-avatar>
 ```
 
-## 设置头像的文本内容
-
-```html
-<nut-avatar size="large" bg-icon>U</nut-avatar>
-```
-
-## 设置背景图片
-```html
-<nut-avatar
-  bg-icon
-  bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
-></nut-avatar>
-```
-
-## 设置头像ICON图标
-```html
-<nut-avatar
-  bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
-></nut-avatar>
-```
-
-## 点击头像有触发事件
-```html
-<nut-avatar @active-avatar="activeAvatar"></nut-avatar>
-```
-
-
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| bg-color | 设置头像背景色 | String | #eee
-| size | 设置头像的大小，提供三种：large /normal/small | String | normal
-| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | round
-| bg-image | 设置头像的背景图片 | String | --
-| bg-icon | 设置头像的icon图标 | String | 默认based64格式的头像图片
+| size-num | 设置头像的大小，表示宽高尺寸，单位是px| String/Number | 20
+| bg-image | 设置头像的背景图片路径地址 | String | --
 
 ## slot
 | 字段 | 说明 |
 |--|--|
-|--|用户自定义icon或者文字|
+|--|用户自定义徽标区域|
 
 
 ## Event