avatar and fix rate

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>

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>

components/avatar/index.js

@@ -0,0 +1,3 @@
+import Avatar from './Avatar'
+
+export default Avatar

components/avatar/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

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;
+  }
+}

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'

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

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)

components/rate/style/index.js

@@ -1,2 +1,2 @@
-import '../../style/index.less';
+import '../../style/index.less'
-import './index.less';
+import './index.less'

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'