dd_pc/src/components/UserImage.vue

<template>
  <div style="box-sizing: border-box;">
    <img v-if="imgUrl" class="logo_img" :src="imgUrl" :width="width" :height="height" />
    <div v-else class="user_name_div" :style="{
	   width: width,
	   height: height,
	   lineHeight: height, 
	   fontSize: fontSize + 'rem'}">
	   {{name}}
	 </div>
  </div>
</template>
<script>
  export default {
    name: 'userImage',
    props: {
      width: {
        type: String,
        default: '0.8rem'
      },
      height: {
        type: String,
        default: '0.8rem'
      },
      id:{
        type: Number,
        default: 0
      },
      img_url: {
        type: String,
        default: ''
      },
      user_name: {
        type: String,
        default: ''
      },
      fontSize:{
        type: String,
        default: '0.8'
      }
    },
    // 数据
    data(){
      return {
        imgUrl: "",
        name: "",
		employeeMap:this.$getCache("userList")
      }
    },
	watch:{
		id: function(val) {
			this.name_no()
		},
		img_url: function(val) {
			this.name_no()
		},
		user_name: function(val) {
			this.name_no()
		},
	},
	// 组件挂载完成
	mounted() {
	  this.name_no()
	},
    // 方法
    methods:{
      name_no(){
		 this.imgUrl=this.img_url
		 this.name=this.user_name
		let pattern = new RegExp("^[\u4E00-\u9FA5]+");
		if(this.name.length > 2){
		  if(pattern.test(this.name)){
		    this.name = this.name.substring(this.name.length-2,this.name.length)
		  }else{
		    this.name = this.name.substring(0,2)
		  }
		}  
        if(!this.imgUrl&&this.id&&this.employeeMap){
          this.imgUrl=this.employeeMap[this.id]? this.employeeMap[this.id].img_url:""
        }
      }
    },
  }
</script>
<style scoped>
  .user_name_div{
    border-radius: 50%;
    background: #409eff;
    text-align: center;
    color: #fff;
    margin: 0 auto;
	box-sizing: border-box;
  }
  .logo_img{
    border-radius: 50%;
  }
</style>