From 76cbfcc4b2e9b1986e0c33db474103f95dbaad03 Mon Sep 17 00:00:00 2001
From: wangxueliang <sandianbaozi@163.com>
Date: Thu, 9 Nov 2017 18:57:34 +0800
Subject: [PATCH] avatar and fix rate

---
 components/avatar/Avatar.vue                  | 102 ++++++++++++++++++
 components/avatar/demo/index.vue              |  46 ++++++++
 components/avatar/index.js                    |   3 +
 components/avatar/style/index.js              |   2 +
 components/avatar/style/index.less            |  48 +++++++++
 components/index.js                           |   2 +
 .../demo/{pagination.vue => index.vue}        |   0
 components/rate/Rate.vue                      |   2 +-
 components/rate/demo/{rate.vue => index.vue}  |   2 +-
 components/rate/style/index.js                |   4 +-
 components/style.js                           |   3 +
 11 files changed, 210 insertions(+), 4 deletions(-)
 create mode 100644 components/avatar/Avatar.vue
 create mode 100644 components/avatar/demo/index.vue
 create mode 100644 components/avatar/index.js
 create mode 100644 components/avatar/style/index.js
 create mode 100644 components/avatar/style/index.less
 rename components/pagination/demo/{pagination.vue => index.vue} (100%)
 rename components/rate/demo/{rate.vue => index.vue} (97%)

diff --git a/components/avatar/Avatar.vue b/components/avatar/Avatar.vue
new file mode 100644
index 000000000..edd952354
--- /dev/null
+++ b/components/avatar/Avatar.vue
@@ -0,0 +1,102 @@
+<template>
+  <span :class="classes" :style="style">
+    <img v-if="src" :src="src"/>
+    <icon v-else-if="icon" :type="icon" />
+    <span
+      v-else
+      ref="avatorChildren"
+      :class="[prefixCls+'-string']"
+      :style="childrenStyle">
+      <slot></slot>
+    </span>
+  </span>
+</template>
+<script>
+import Icon from '../icon/index'
+
+export default {
+  name: 'Avatar',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-avatar',
+    },
+    shape: {
+      validator (val) {
+        return ['circle', 'square'].includes(val)
+      },
+      default: 'circle',
+    },
+    size: {
+      validator (val) {
+        return ['small', 'large', 'default'].includes(val)
+      },
+      default: 'default',
+    },
+    src: String,
+    icon: String,
+    style: {
+      type: Object,
+      default: {},
+    },
+  },
+  data () {
+    return {
+      isExitSlot: false,
+      scale: 1,
+    }
+  },
+  computed: {
+    classes () {
+      const { prefixCls, shape, size, src, icon } = this
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-${shape}`]: true,
+        [`${prefixCls}-lg`]: size === 'large',
+        [`${prefixCls}-sm`]: size === 'small',
+        [`${prefixCls}-image`]: !!src,
+        [`${prefixCls}-icon`]: !!icon,
+      }
+    },
+    childrenStyle () {
+      const children = this.$refs.avatorChildren
+      let style = {}
+      if (this.isExitSlot) {
+        style = {
+          msTransform: `scale(${this.scale})`,
+          WebkitTransform: `scale(${this.scale})`,
+          transform: `scale(${this.scale})`,
+          position: 'absolute',
+          display: 'inline-block',
+          left: `calc(50% - ${Math.round(children.offsetWidth / 2)}px)`,
+        }
+      }
+      return style
+    },
+  },
+  methods: {
+    setScale () {
+      this.isExitSlot = !this.src && !this.icon
+      const children = this.$refs.avatorChildren
+      if (children) {
+        const childrenWidth = children.offsetWidth
+        const avatarWidth = this.$el.getBoundingClientRect().width
+        if (avatarWidth - 8 < childrenWidth) {
+          this.scale = (avatarWidth - 8) / childrenWidth
+        } else {
+          this.scale = 1
+        }
+      }
+    },
+  },
+  mounted () {
+    this.setScale()
+  },
+  updated () {
+    this.setScale()
+  },
+  components: {
+    Icon,
+  },
+}
+</script>
diff --git a/components/avatar/demo/index.vue b/components/avatar/demo/index.vue
new file mode 100644
index 000000000..9fc0f63f8
--- /dev/null
+++ b/components/avatar/demo/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div>
+      <avatar size="large" icon="user"/>
+      <avatar icon="user"/>
+      <avatar size="small" icon="user"/>
+    </div>
+    <div>
+      <avatar shape="square" size="large" icon="user" />
+      <avatar shape="square" icon="user" />
+      <avatar shape="square" size="small" icon="user" />
+    </div>
+    <div>
+      <avatar icon="user" />
+      <avatar>U</avatar>
+      <avatar>USER</avatar>
+      <avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+      <avatar :style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</avatar>
+      <avatar :style="{ backgroundColor: '#87d068' }" icon="user" />
+    </div>
+    <div>
+      <avatar shape="square" size="large">{{avatarValue}}</avatar>
+      <AntButton @click="changeValue">改变</AntButton>
+    </div>
+  </div>
+</template>
+<script>
+import '../style'
+import { Avatar, Button } from 'antd/index'
+export default {
+  data () {
+    return {
+      avatarValue: 'current',
+    }
+  },
+  methods: {
+    changeValue () {
+      this.avatarValue = 'changed'
+    },
+  },
+  components: {
+    Avatar,
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/avatar/index.js b/components/avatar/index.js
new file mode 100644
index 000000000..df6e93398
--- /dev/null
+++ b/components/avatar/index.js
@@ -0,0 +1,3 @@
+import Avatar from './Avatar'
+
+export default Avatar
diff --git a/components/avatar/style/index.js b/components/avatar/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/avatar/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
new file mode 100644
index 000000000..ede8b9850
--- /dev/null
+++ b/components/avatar/style/index.less
@@ -0,0 +1,48 @@
+@import "../../style/themes/default";
+
+@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
+
+.@{avatar-prefix-cls} {
+  display: inline-block;
+  text-align: center;
+  background: @avatar-bg;
+  color: @avatar-color;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+
+  .avatar-size(@avatar-size-base, @avatar-font-size-base);
+
+  &-lg {
+    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+  }
+
+  &-sm {
+    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+  }
+
+  &-square {
+    border-radius: @avatar-border-radius;
+  }
+
+  & > img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
+
+.avatar-size(@size, @font-size) {
+  width: @size;
+  height: @size;
+  line-height: @size;
+  border-radius: @size / 2;
+
+  & > * {
+    line-height: @size;
+  }
+
+  &.@{avatar-prefix-cls}-icon {
+    font-size: @font-size;
+  }
+}
diff --git a/components/index.js b/components/index.js
index 1d7a69880..ce5dbc5d3 100644
--- a/components/index.js
+++ b/components/index.js
@@ -19,3 +19,5 @@ export { default as Row } from './grid/Row'
 export { default as Col } from './grid/Col'
 
 export { default as Tag } from './tag'
+
+export { default as Avatar } from './avatar'
diff --git a/components/pagination/demo/pagination.vue b/components/pagination/demo/index.vue
similarity index 100%
rename from components/pagination/demo/pagination.vue
rename to components/pagination/demo/index.vue
diff --git a/components/rate/Rate.vue b/components/rate/Rate.vue
index 1aa075175..6340fda71 100644
--- a/components/rate/Rate.vue
+++ b/components/rate/Rate.vue
@@ -61,7 +61,7 @@ export default {
     const { value, defaultValue } = this
     const reValue = value === undefined ? defaultValue : value
     return {
-      hoverValue: reValue,
+      hoverValue: undefined,
       stateValue: reValue,
     }
   },
diff --git a/components/rate/demo/rate.vue b/components/rate/demo/index.vue
similarity index 97%
rename from components/rate/demo/rate.vue
rename to components/rate/demo/index.vue
index 2902b7434..5d46666cf 100644
--- a/components/rate/demo/rate.vue
+++ b/components/rate/demo/index.vue
@@ -56,7 +56,7 @@ export default {
       this.hoverValueAH = val
     },
     changeValue () {
-      this.initValue = undefined
+      this.initValue = 4
     },
     getValue () {
       console.log(this.initValue)
diff --git a/components/rate/style/index.js b/components/rate/style/index.js
index 3a3ab0de5..cf31ed80f 100644
--- a/components/rate/style/index.js
+++ b/components/rate/style/index.js
@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.less'
+import './index.less'
diff --git a/components/style.js b/components/style.js
index bd87c8bbc..5dc17fc10 100644
--- a/components/style.js
+++ b/components/style.js
@@ -4,3 +4,6 @@ import './radio/style'
 import './checkbox/style'
 import './grid/style'
 import './tag/style'
+import './rate/style'
+import './pagination/style'
+import './avatar/style'