Vue 组件方法重用

HTML

<template>
  <section class="recentto">
    <Card title="最近创建的话题" :bordered="false" :dis-hover="true">
      <CellGroup>
        <article v-for="item in recentTo" :key="item.id">
          <Avatar shape="square" :src="item.author.avatar_url" size="small" />
          <a href="#" class="recentto-tit ks-text-overflow" :title="item.title">{{item.title}}</a>
          <a href="#" class="recentto-reply">
            <Avatar shape="square" :src="item.author.avatar_url" size="small" />{{lastReplyTime(item.last_reply_at)}}
          </a>
        </article>
      </CellGroup>
      <a href="#" class="recentto-more">
        查看更多<Icon type="ios-arrow-forward" />
      </a>
    </Card>
  </section>
</template>

CSS

.recentto div.ivu-card-head, .recentre div.ivu-card-head {
  border-bottom: solid 1px #E5E5E5;
  background-color: #F6F6F6;
  padding: 10px;
  border-radius: 4px 4px 0 0; 
  -moz-border-radius: 4px 4px 0 0; 
  -webkit-border-radius: 4px 4px 0 0; 
}
.recentto div.ivu-card-body, .recentre div.ivu-card-body {padding: 0;}
.recentto article, .recentre article {
  padding: 10px;
  border-bottom: solid 1px #E5E5E5;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
}
.recentto article span.ivu-avatar, .recentre-avatar {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.recentto-reply span {
  margin-right: 10px;
}
.recentto-tit:link, .recentto-tit:visited {
  -webkit-flex: 1 0 85%;
  flex: 1 0 85%;
  margin-left: 10px;
  color: #08C;
  padding-right: 10px;
}
.recentto-tit:hover {text-decoration: underline;}
.recentto-reply:link, .recentto-reply:visited {
  -webkit-flex: 0 0 11%;
  flex: 0 0 11%;
  font-size: 12px;
  color: #777;
}
.recentto-reply:hover, .recentto-more:hover {color: #08C;}
.recentto-more:link, .recentto-more:visited {
  display: block;
  line-height: 40px;
  padding-left: 10px;
}
.recentto-more i.ivu-icon {vertical-align: text-top;}

Vue

import time from '@/assets/js/time';

export default {
  name: 'RecentTopics',
  props: {
    recentTo: {
      type: Array,
      default(){
        return [];
      }
    }
  },
  methods: {
    //计算最后回复的相对时间
    lastReplyTime(replyTime){
      let obj = time.getTime(replyTime, new Date().toISOString());

      switch(true){
        case obj.year !== 0:
          return `${obj.year} 年前`;
          break;
        case obj.month !== 0:
          return `${obj.month} 个月前`;
          break;
        case obj.day !== 0:
          return `${obj.day} 天前`;
          break;
        case obj.hour !== 0:
          return `${obj.hour} 小时前`;
          break;
        case obj.minute !== 0:
          return `${obj.minute} 分钟前`;
          break;
        default:
          return '刚刚';
      };
    } 
  }
}