搜索结果列表页面开发

src/components/GAvatar/README.md

@@ -0,0 +1,13 @@
+### 说明
+
+基于 `d-avatar`封装，`src` 加载失败或为空时时，取 `name`首字符大写进行展示；
+
+### Props
+
+| 参数     | 说明                                                   | 类型    | 可选值 | 默认值   |
+| -------- | ------------------------------------------------------ | ------- | ------ | -------- |
+| src      | 头像地址，必传                                         | string  |        | ''       |
+| name     | 必传； 传入字符串，src load-error 时，取首字母制作头像 | string  |        | 'Avatar' |
+| width    | 宽度，可选                                             | number  |        | 40       |
+| height   | 高度，可选                                             | number  |        | 40       |
+| is_round | 是否显示为圆形                                         | boolean |        | true     |

src/components/GAvatar/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <Avatar
+    :img-src="imgSrc"
+    :name="placeholderName"
+    :width="width"
+    :height="height"
+    :is-round="is_round"
+    :class="{ 'devui-avatar-square': !is_round, 'gavatar-custom': !imgSrc }"
+    @load-error="onLoadError"
+    :style="{minWidth: width + 'px'}"
+  />
+</template>
+
+<script setup lang="ts">
+import { Avatar } from 'vue-devui/avatar';
+import { ref, watchEffect } from 'vue';
+
+defineOptions({
+  name: 'GAvatar'
+});
+
+interface IProps{
+  src:string;
+  name:string;
+  width?:number;
+  height?:number;
+  is_round?:boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  src: '',
+  name: 'Avatar',
+  width: 32,
+  height: 32,
+  is_round: true
+});
+
+const imgSrc = ref('');
+const placeholderName = ref('');
+
+const onLoadError = (e) => {
+  imgSrc.value = '';
+  placeholderName.value = placeholderName.value.substring(0, 1).toUpperCase();
+};
+watchEffect(() => {
+  imgSrc.value = props.src;
+  placeholderName.value = props.name || 'Avatar';
+  if (!props.src) {
+    placeholderName.value = placeholderName.value.substring(0, 1).toUpperCase();
+  }
+});
+</script>
+