Merge pull request #7 from wangdabaoqq/avatar

(component): 增加avatar组件插槽,支持图标和文本方式
This commit is contained in:
就眠儀式 2022-09-26 09:41:56 +08:00 committed by GitHub
commit 12cb3f3555
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 4 deletions

View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { computed } from "vue"; import { computed, useSlots } from "vue";
export default { export default {
name: "LayAvatar", name: "LayAvatar",
}; };
@ -7,7 +7,6 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import "./index.less"; import "./index.less";
export interface LayAvatarProps { export interface LayAvatarProps {
src?: string; src?: string;
size?: "xs" | "sm" | "md" | "lg"; size?: "xs" | "sm" | "md" | "lg";
@ -27,8 +26,14 @@ const classes = computed(() => {
props.size ? `layui-avatar-${props.size}` : "", props.size ? `layui-avatar-${props.size}` : "",
]; ];
}); });
const slot = useSlots();
</script> </script>
<template> <template>
<img :alt="alt" :src="src" :class="classes" /> <span v-if="!slot.default" :class="classes">
<img :alt="alt" :src="src" />
</span>
<span :class="classes" v-else >
<slot></slot>
</span>
</template> </template>

View File

@ -1,10 +1,13 @@
<script lang="ts"> <script lang="ts">
import { computed, CSSProperties, useSlots, useAttrs } from "vue";
export default { export default {
name: "LayAvatarList", name: "LayAvatarList",
}; };
</script> </script>
<script setup lang="ts"></script> <script setup lang="ts">
const slot = useSlots();
</script>
<template> <template>
<div class="layui-avatar-list"> <div class="layui-avatar-list">