learning-system-portal/src/components/Portal/author.vue

<template>
	<div class="item-author">
		<div>
      <el-avatar shape="circle" size="small" :src="userAvatar"></el-avatar>
      <!-- <div class="avatar-text" :style="{width:width,height:height,fontSize:fontSize}">{{userName}}</div> -->
    </div>
		<div v-if="!onlyAvatar" style="padding-left: 5px;padding-top: 6px;font-size: 14px;color: #666666;">
      <span>{{userName}}</span>
      <span class="author-text" v-if="userInfo && userInfo!=''"> {{userInfo}} </span>
    </div>
	</div>
</template>
<script>
  import {cutOrgNamePath} from "@/utils/tools.js";
	export default {
		props:{
			data:{
				type:Object,
				default(){
          return {
            avatar:'',
            name:'',
            info:'',
            sex:null,
          }
        }
			},
      width:{
        type:String,
				default:'28px'
      },
      height:{
        type:String,
				default:'28px'
      },
	    onlyAvatar:{
        type:Boolean,
        default:false
      }
		},
    data(){
    	return {
          baseUrl:process.env.VUE_APP_FILE_BASE_URL,
          userAvatar:'',
          userName:'',
          userInfo:'',
          usersex:null,
    	}
    },
    created() {
      this.userAvatar=require("@/assets/images/user/default.png");
    },
    mounted() {
      this.loadAvatar()
    },
    watch:{
     data(newVal){
       this.loadAvatar()
     }
    },
    methods:{
      loadAvatar(){
        this.userName=this.data.name;
        if(this.data.avatar && this.data.avatar!=''){
          this.userAvatar=this.data.avatar;
        }
        this.userInfo=cutOrgNamePath(this.data.info);
        this.usersex=this.data.sex
      }
    }
	}
</script>

<style scoped lang="scss">
	.item-author{
		// font-size: 0.9em;
    line-height: 18px;
		display: flex;
    .author-text{
      color: #666666;
    }
    .avatar-text{
      color: #73adfe;
      border: 1px solid #73adfe;
      background: #d9e9ff;
    }
	}
</style>