aiforge/web_src/js/components/Contributors.vue

<template>
    <div class="ui container">
        <div class="row git-user-content">
                <h3 class="ui header">
                    <div class="ui breadcrumb">
                        <a class="section" href="/">代码</a>
                        <div class="divider"> / </div>
                        <div class="active section" >贡献者({{totalNum}})</div>
                    </div>
                </h3>
                <div class="ui horizontal relaxed list">
                        <div class="item user-list-item" v-for="(contributor,i) in contributors_list_page" >
                            <a v-if="contributor.user_name" :href="AppSubUrl +'/'+ contributor.user_name"><img class="ui avatar s16 image js-popover-card" :src="contributor.rel_avatar_link"></a>
                            <a v-else :href="'mailto:' + contributor.email "><img class="ui avatar s16 image js-popover-card" :avatar="contributor.email"></a>
                            <div class="content">
                                <div class="header" >
                                    <a v-if="contributor.user_name" :href="AppSubUrl +'/'+ contributor.user_name">{{contributor.user_name}}</a>
                                    <a v-else :href="'mailto:' + contributor.email ">{{contributor.email}}</a>       
                                </div>
                                <span class="commit-btn">Commits: {{contributor.commit_cnt}}</span>
                            </div>
                        </div>
                </div>
        </div>
        
        <div class="ui container" style="margin-top:50px;text-align:center">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalNum">
                </el-pagination>
        </div>
    </div>
</template>

<script>

const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;

export default {
  
  data() {
    return {
        url:'',
        contributors_list:[],
        contributors_list_page:[],
        currentPage:1,
        pageSize:50,
        totalNum:0,
        AppSubUrl:AppSubUrl
    };
  },
methods: {

    getContributorsList(){
        this.$axios.get(this.url+'/contributors/list').then((res)=>{
            this.contributors_list = res.data.contributor_info
            this.totalNum = this.contributors_list.length
            this.contributors_list_page = this.contributors_list.slice(0,this.pageSize)
        })
    },
    handleCurrentChange(val){
        this.contributors_list_page = this.contributors_list.slice((val-1)*this.pageSize,val*this.pageSize)
    },
       
},
computed:{
   
},
watch: {

},
created(){
    this.url=document.head.querySelector("[property~='og:url'][content]").content
    this.getContributorsList()
    
},

updated(){
    if(document.querySelectorAll('img[avatar]').length!==0){
        window.LetterAvatar.transform()
    }
}
};
</script>

<style scoped>
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #5bb973;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
/deep/ .el-pagination.is-background .el-pager li:hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #5bb973;
  color: #FFF;
}
</style>