add 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: Avatar
 };
 
 const components = {};

src/packages/avatar/avatar.scss

@@ -0,0 +1,41 @@
+.nut-avatar{
+    background-size:100% 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.icon{
+    width:50%;
+    height: 50%;
+    background-size:100% 100%;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+}
+.text{
+    //transform: scale(0.75);
+    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);
+}

src/packages/avatar/demo.vue

@@ -0,0 +1,38 @@
+<template>
+      <div class="demo-list">
+      <h4>默认用法</h4>
+      <nut-cell><span slot="title"><nut-avatar></nut-avatar></span></nut-cell>
+      <h4>可以修改背景色</h4>
+      <nut-cell><span slot="title"><nut-avatar bgColor="#87d068"></nut-avatar></span></nut-cell>
+      <h4>可以修改大小</h4>
+      <nut-cell><span slot="title"><nut-avatar :size="30"></nut-avatar></span></nut-cell>
+      <h4>可以修改头像的形状类型</h4>
+      <nut-cell><span slot="title"><nut-avatar shape="square"></nut-avatar></span></nut-cell>
+      <h4>可以修改头像的内容</h4>
+      <nut-cell><span slot="title"><nut-avatar :size="30" bgIcon="">U</nut-avatar></span></nut-cell>
+      <h4>可以增加头像右上角的徽标</h4>
+      <nut-cell><span slot="title"><nut-avatar :dot="13"></nut-avatar></span></nut-cell>
+      <h4>可以修改头像背景图片</h4>
+      <nut-cell><span slot="title"><nut-avatar bgIcon="" bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar></span></nut-cell>
+      <h4>可以修改头像icon图标</h4>
+      <nut-cell><span slot="title"><nut-avatar bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar></span></nut-cell>
+    </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+    return {};
+  },
+  methods: {
+      
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/avatar/doc.md

@@ -0,0 +1,62 @@
+# Avatar 头像
+
+用来代表用户或事物，支持图片、图标或字符展示。
+
+## 基本用法
+
+```html
+<nut-avatar></nut-avatar>
+```
+
+## 设置背景色
+
+```html
+<nut-avatar bgColor="#87d068"></nut-avatar>
+```
+
+
+## 设置大小
+
+```html
+<nut-avatar :size="30"></nut-avatar>
+```
+
+## 设置头像的形状类型
+```html
+<nut-avatar shape="square"></nut-avatar>
+```
+
+
+## 设置头像的文本内容
+```html
+<nut-avatar :size="30" bgIcon="">U</nut-avatar>
+```
+
+## 设置头像右上角的徽标
+```html
+<nut-avatar :dot="13"></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>
+```
+
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| bgColor | 设置头像背景色 | String | #eee
+| size | 设置头像的大小，也就是宽和高，单位是px | Number | 40
+| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | --
+| doc | 设置带徽标的头像，默认为0，为0时不显示徽标 | Number | 0
+| bgImage | 设置头像的背景图片 | String | --
+| bgIcon | 设置头像的icon图标 | String | --

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 {}