baiyuApp/pages_im/components/MyAvatar/index.vue

<template>
	<view style="position: relative;">
		<u-avatar
		  @longpress="longpress"
		  @click="click"
		  @onError="errorHandle"
		  :src="getAvatarUrl"
		  :text="avatarText"
		  bgColor="#e5e5e5"
		  :defaultUrl="getDdefaultUrl"
		  :shape="shape"
		  :size="size"
		  mode="aspectFill"
		  font-size="14">
		</u-avatar>
	
		<!-- <image  @longpress="longpress"  @click="click" :src="getAvatarUrl" class="headImg"></image> -->
		
		<slot >
		</slot>
		
	</view>
  
</template>

<script>
import defaultGroupIcon from "../../static/images/contact_my_group.png";
import defaultNotifyIcon from "../../static/images/default_notify_icon.png";
import defaultFaceIcon from "../../static/images/default_head.png";
export default {
  name: "MyAvatar",
  props: {
    src:{
		type: String,
		default: "", 
	},
    shape: {
      type: String,
      default: "square", //square   circle
    },
    size: {
      type: String,
      default: "44",
    },
    isGroup: {
      type: Boolean,
      default: false,
    },
    isNotify: {
      type: Boolean,
      default: false,
    },

    desc: String,
  },
  data() {
    return {
      avatarText: undefined,
	  defaultImg:""
    };
  },
  computed: {
	
    getAvatarUrl() {
	 
      if (this.src) {
          return this.src;
      }
      else if (this.isGroup) {
        return defaultGroupIcon;
      }
      else if (this.isNotify) {
        return defaultNotifyIcon;
      }
	  else{
	  	 return defaultFaceIcon;
	  }
	  
      // this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
      // return "";
    },
    getDdefaultUrl() {
      return this.isGroup ? defaultGroupIcon : undefined;
    },
  },
  methods: {
	getImgSrc(){
	  	
	  	if(!this.src){
	  		return defaultFaceIcon;
	  	}
	  	return this.src;
	},
    errorHandle() {
      this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
    },
    redirectShow() {
      if (this.avatarText) {
        this.avatarText = undefined;
      }
    },
    click() {
      this.$emit("click");
    },
    longpress() {
      this.$emit("longpress");
    },
  },
  watch: {
    src() {
      this.redirectShow();
    },
    desc() {
      this.redirectShow();
    },
  },
};
</script>

<style lang="scss">

	.headImg{
		background: #f5f5f5;
		width: 60px;
		height: 60px;
		border-radius:10px ;
	}
	
	
</style>