fix: avatar list

Author: sendya

src/components/AvatarList/Item.vue

@@ -1,12 +1,9 @@
 <template>
-  <li :class="[prefixCls, size]">
-    <slot>
-      <tooltip>
-        <template slot="title">{{ tips }}</template>
-        <avatar :size="size !== 'mini' && size || 20" :src="src" />
-      </tooltip>
-    </slot>
-  </li>
+  <tooltip v-if="tips !== ''">
+    <template slot="title">{{ tips }}</template>
+    <avatar :size="avatarSize" :src="src" />
+  </tooltip>
+  <avatar v-else :size="avatarSize" :src="src" />
 </template>
 
 <script>
@@ -20,10 +17,6 @@
       Tooltip
     },
     props: {
-      prefixCls: {
-        type: String,
-        default: 'ant-pro-avatar-list-item'
-      },
       tips: {
         type: String,
         default: '',
@@ -39,6 +32,11 @@
         size: this.$parent.size
       }
     },
+    computed: {
+      avatarSize () {
+        return this.size !== 'mini' && this.size || 20
+      }
+    },
     watch: {
       '$parent.size' (val) {
         this.size = val

src/components/AvatarList/List.vue

@@ -1,19 +1,25 @@
+<!--
 <template>
   <div :class="[prefixCls]">
     <ul>
       <slot></slot>
-      <template v-if="maxLength > 0 && slotsSize > maxLength">
+      <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
+
+
+      <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
         <avatar-item :size="size">
           <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
         </avatar-item>
       </template>
     </ul>
   </div>
 </template>
+-->
 
 <script>
   import Avatar from 'ant-design-vue/es/avatar'
   import AvatarItem from './Item'
+  import { filterEmpty } from '@/components/_util/util'
 
   export default {
     AvatarItem,
@@ -56,24 +62,39 @@
       }
     },
     data () {
-      return {
-        slotsSize: 0
-      }
-    },
-    created () {
-      this.slotsSize = this.$slots.default.length
-      this.splitSlots()
+      return {}
     },
     methods: {
-      splitSlots () {
-        if (this.maxLength !== 0 && this.slotsSize > this.maxLength) {
-          this.$slots.default = this.$slots.default.slice(0, this.maxLength)
+      getItems(items) {
+        const classString = {
+          [`${this.prefixCls}-item`]: true,
+          [`${this.size}`]: true
+        }
+
+        if (this.maxLength > 0) {
+          items = items.slice(0, this.maxLength)
+          items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
         }
+        const itemList = items.map((item) => (
+          <li class={ classString }>{ item }</li>
+        ))
+        return itemList
       }
+    },
+    render () {
+      const { prefixCls, size } = this.$props
+      const classString = {
+        [`${prefixCls}`]: true,
+        [`${size}`]: true,
+      }
+      const items = filterEmpty(this.$slots.default)
+      const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null
+
+      return (
+        <div class={ classString }>
+          { itemsDom }
+        </div>
+      )
     }
   }
-</script>
-
-<style lang="less" scoped>
-
-</style>
+</script>

src/components/CountDown/CountDown.vue

@@ -0,0 +1,103 @@
+<template>
+  <span>
+    {{ lastTime | format }}
+  </span>
+</template>
+
+<script>
+
+  function fixedZero(val) {
+    return val * 1 < 10 ? `0${val}` : val;
+  }
+
+  export default {
+    name: "CountDown",
+    props: {
+      format: {
+        type: Function,
+        default: undefined
+      },
+      target: {
+        type: [Date, Number],
+        required: true,
+      },
+      onEnd: {
+        type: Function,
+        default: () => {
+        }
+      }
+    },
+    data() {
+      return {
+        dateTime: '0',
+        originTargetTime: 0,
+        lastTime: 0,
+        timer: 0,
+        interval: 1000
+      }
+    },
+    filters: {
+      format(time) {
+        const hours = 60 * 60 * 1000;
+        const minutes = 60 * 1000;
+
+        const h = Math.floor(time / hours);
+        const m = Math.floor((time - h * hours) / minutes);
+        const s = Math.floor((time - h * hours - m * minutes) / 1000);
+        return `${fixedZero(h)}:${fixedZero(m)}:${fixedZero(s)}`
+      }
+    },
+    created() {
+      this.initTime()
+      this.tick()
+    },
+    methods: {
+      initTime() {
+        let lastTime = 0;
+        let targetTime = 0;
+        this.originTargetTime = this.target
+        try {
+          if (Object.prototype.toString.call(this.target) === '[object Date]') {
+            targetTime = this.target
+          } else {
+            targetTime = new Date(this.target).getTime()
+          }
+        } catch (e) {
+          throw new Error('invalid target prop')
+        }
+
+        lastTime = targetTime - new Date().getTime();
+
+        this.lastTime = lastTime < 0 ? 0 : lastTime
+      },
+      tick() {
+        const {onEnd} = this
+
+        this.timer = setTimeout(() => {
+          if (this.lastTime < this.interval) {
+            clearTimeout(this.timer)
+            this.lastTime = 0
+            if (typeof onEnd === 'function') {
+              onEnd();
+            }
+          } else {
+            this.lastTime -= this.interval
+            this.tick()
+          }
+        }, this.interval)
+      }
+    },
+    beforeUpdate () {
+      if (this.originTargetTime !== this.target) {
+        this.initTime()
+      }
+    },
+    beforeDestroy() {
+      clearTimeout(this.timer)
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/CountDown/index.js

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

src/components/_util/util.js

@@ -0,0 +1,12 @@
+/**
+ * components util
+ */
+
+/**
+ * 清理空值，对象
+ * @param children
+ * @returns {*[]}
+ */
+export function filterEmpty (children = []) {
+  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+}

src/views/Home.vue

@@ -54,6 +54,7 @@
         <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
         <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
         <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+
       </avatar-list>
 
       <a-divider type="vertical" style="margin: 0 16px" />
@@ -64,6 +65,16 @@
         <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
       </avatar-list>
     </a-card>
+
+    <a-divider> CountDown </a-divider>
+
+    <a-card>
+      <count-down
+        style="font-size: 2rem"
+        :target="new Date().getTime() + 3000"
+        :on-end="onEndHandle">
+      </count-down>
+    </a-card>
   </div>
 </template>
 
@@ -72,15 +83,27 @@
 
   import Trend from '@/components/Trend'
   import AvatarList from '@/components/AvatarList'
+  import CountDown from '@/components/CountDown/CountDown'
 
   const AvatarListItem = AvatarList.AvatarItem
 
   export default {
     name: 'Home',
     components: {
+      CountDown,
       Trend,
       AvatarList,
       AvatarListItem
+    },
+    data () {
+      return {
+        targetTime: new Date().getTime() + 3900000
+      }
+    },
+    methods: {
+      onEndHandle () {
+        this.$message.success('CountDown callback!!!')
+      }
     }
   }
 </script>
@@ -89,10 +112,11 @@
   .home {
     width: 900px;
     margin: 0 auto;
+    padding: 25px 0;
   }
   .home > .banner {
     text-align: center;
-    padding-top: 25px;
+    padding: 25px 0;
     margin: 25px 0;
   }
 </style>