init

src/component/avatar/index.less

@@ -0,0 +1,51 @@
+.layui-avatar {
+  font-size: 14px;
+  font-variant: tabular-nums;
+  border-radius: var(--global-border-radius);
+  box-sizing: border-box;
+  color: #ffffff;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  background: #eeeeee;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  vertical-align: middle;
+}
+
+.layui-avatar.layui-avatar-radius {
+  border-radius: 50%;
+}
+
+.layui-avatar.layui-avatar-sm {
+  height: 30px;
+  width: 30px;
+}
+
+.layui-avatar.layui-avatar-lg {
+  height: 36px;
+  width: 36px;
+}
+
+.layui-avatar.layui-avatar-xs {
+  height: 28px;
+  width: 28px;
+}
+
+.layui-avatar-list .layui-avatar {
+  margin-left: -10px;
+  display: inline-block;
+}
+
+.layui-avatar {
+  & > img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+}

src/component/avatar/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/avatar/index.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { computed, useSlots } from "vue";
+import { LayIcon } from "@layui/icons-vue";
+export default {
+  name: "LayAvatar",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+
+export interface AvatarProps {
+  src?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  radius?: boolean;
+  icon?: string;
+  alt?: string;
+}
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  size: "md",
+  radius: false,
+  icon: "layui-icon-username",
+});
+
+const slot = useSlots();
+
+const classes = computed(() => {
+  return [
+    "layui-avatar",
+    props.radius ? "layui-avatar-radius" : "",
+    props.size ? `layui-avatar-${props.size}` : "",
+  ];
+});
+</script>
+
+<template>
+  <span :class="classes" v-if="slot.default">
+    <slot></slot>
+  </span>
+  <span v-else :class="classes">
+    <img v-if="src" :src="src" :alt="alt" />
+    <lay-icon v-else :type="icon" />
+  </span>
+</template>