Merge pull request #7 from wangdabaoqq/avatar
✨(component): 增加avatar组件插槽,支持图标和文本方式
This commit is contained in:
commit
12cb3f3555
@ -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>
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user