Merge pull request #124 from zhenyulei/v2-dev

feat：新增 Avatar 组件

src/config.json

@@ -452,6 +452,16 @@
       "sort": "1",
       "showDemo": true,
       "author": "Frans"
+    },
+    {
+      "version": "1.0.0",
+      "name": "Avatar",
+      "chnName": "头像",
+      "desc": "用来表示用户或事物，支持图片或字符展示。",
+      "type": "component",
+      "sort": "5",
+      "showDemo": true,
+      "author": "zhenyulei"
     }
   ]
 }

src/nutui.js

@@ -87,6 +87,8 @@ import Uploader from "./packages/uploader/index.js";
 import "./packages/uploader/uploader.scss";
 import TextInput from "./packages/textinput/index.js";
 import "./packages/textinput/textinput.scss";
+import Avatar from "./packages/avatar/index.js";
+import "./packages/avatar/avatar.scss";
 
 const packages = {
   Cell,
@@ -131,7 +133,8 @@ const packages = {
   CountDown,
   InfiniteLoading,
   Uploader,
-  TextInput
+  TextInput,
+  Avatar
 };
 
 const components = {};

src/packages/avatar/avatar.scss

@@ -0,0 +1,62 @@
+.nut-avatar{
+    background-size:100% 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: inline-block;
+    position: relative;
+    margin-right: 10px;
+    .icon{
+        width:50%;
+        height: 50%;
+        background-size:100% 100%;
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%,-50%);
+    }
+    .text{
+        display: inline-block;
+        width:100%;
+        text-align: center;
+        overflow: hidden;
+    }
+    .dot{
+        position: absolute;
+        min-width: 18px;
+        min-height: 18px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 2px;
+        text-align: center;
+        border-radius: 50%;
+        background:red;
+        top:-4px;
+        right: -5px;
+        color: #fff;
+        font-size: 12px;
+        transform: scale(0.8);
+        line-height: 1;
+    }
+}
+.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

@@ -0,0 +1,54 @@
+<template>
+      <div class="demo-list">
+      <h4>默认用法,有三种尺寸</h4>
+        <div class="white-bg">
+          <nut-avatar size="large"></nut-avatar>
+          <nut-avatar size="normal"></nut-avatar>
+          <nut-avatar size="small"></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 bgColor="#f0250f"></nut-avatar></div>
+      <h4>可以修改头像的内容</h4>
+      <div class="white-bg"><nut-avatar size="large" bgIcon="">U</nut-avatar></div>
+      <h4>可以修改头像背景图片</h4>
+      <div class="white-bg">
+        <nut-avatar bgIcon="" bgImage="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 bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar>
+      </div>
+      <h4>点击头像有触发事件</h4>
+      <div class="white-bg"><nut-avatar @activeAvatar="activeAvatar"></nut-avatar></div>
+    </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+    return {};
+  },
+  methods: {
+      activeAvatar(){
+        console.log('点击了头像');
+      }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.white-bg {
+  padding: 10px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+}
+</style>

src/packages/avatar/doc.md

@@ -0,0 +1,72 @@
+# Avatar 头像
+
+用来代表用户或事物，支持图片、图标或字符展示。
+
+## 基本用法
+
+```html
+<nut-avatar></nut-avatar>
+```
+
+## 设置背景色
+
+```html
+<nut-avatar bgColor="#87d068"></nut-avatar>
+```
+
+
+## 设置大小
+
+```html
+<nut-avatar size="large"></nut-avatar>
+<nut-avatar size="normal"></nut-avatar>
+<nut-avatar size="small"></nut-avatar>
+```
+
+## 设置头像的形状类型
+```html
+<nut-avatar shape="square"></nut-avatar>
+```
+
+
+## 设置头像的文本内容
+```html
+<nut-avatar :size="30" bgIcon="">U</nut-avatar>
+```
+
+## 设置头像背景图片
+```html
+<nut-avatar 
+bgIcon="" bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png">
+</nut-avatar>
+```
+
+## 设置头像icon图标
+```html
+<nut-avatar bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png">
+</nut-avatar>
+```
+
+## 点击头像有触发事件
+```html
+<nut-avatar @activeAvatar="activeAvatar">
+</nut-avatar>
+```
+
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| bgColor | 设置头像背景色 | String | #eee
+| size | 设置头像的大小，提供三种：large /normal/small | String | normal
+| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | --
+| bgImage | 设置头像的背景图片 | String | --
+| bgIcon | 设置头像的icon图标 | String | --
+
+
+## Event
+
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| activeAvatar | 点击头像有触发事件 | -- 

src/packages/avatar/index.js

@@ -0,0 +1,8 @@
+import Avatar from './avatar.vue';
+import './avatar.scss';
+
+Avatar.install = function(Vue) {
+  Vue.component(Avatar.name, Avatar);
+};
+
+export default Avatar

types/nutui.d.ts

@@ -60,3 +60,4 @@ export declare class Scroller extends UIComponent {}
 export declare class CountDown extends UIComponent {}
 export declare class Uploader extends UIComponent {}
 export declare class TextInput extends UIComponent {}
+export declare class Avatar extends UIComponent {}