mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-11 17:41:04 +08:00
129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
<template>
|
||
<div
|
||
class="base-user-avatar"
|
||
:class="wrapperClass"
|
||
:style="wrapperStyle"
|
||
v-bind="wrapperAttrs"
|
||
@click="handleClick"
|
||
>
|
||
<BaseImage :src="props.src" :alt="altText" class="base-user-avatar-img" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, watch } from 'vue'
|
||
import { useAttrs } from 'vue'
|
||
import BaseImage from './BaseImage.vue'
|
||
|
||
const props = defineProps({
|
||
userId: {
|
||
type: [String, Number],
|
||
default: null,
|
||
},
|
||
src: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
alt: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
width: {
|
||
type: [Number, String],
|
||
default: null,
|
||
},
|
||
rounded: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
disableLink: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
to: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
})
|
||
|
||
const attrs = useAttrs()
|
||
|
||
const resolvedLink = computed(() => {
|
||
if (props.to) return props.to
|
||
if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
|
||
return `/users/${props.userId}`
|
||
}
|
||
return null
|
||
})
|
||
|
||
const altText = computed(() => props.alt || '用户头像')
|
||
|
||
const sizeStyle = computed(() => {
|
||
var style = {}
|
||
|
||
if (props.width > 0) {
|
||
style.width = `${props.width}px`
|
||
}
|
||
if (props.height > 0) {
|
||
style.height = `${props.height}px`
|
||
}
|
||
|
||
return style
|
||
})
|
||
|
||
const wrapperStyle = computed(() => {
|
||
const attrStyle = attrs.style
|
||
return [sizeStyle.value, attrStyle]
|
||
})
|
||
|
||
const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
|
||
|
||
const wrapperAttrs = computed(() => {
|
||
const { class: _class, style: _style, ...rest } = attrs
|
||
return rest
|
||
})
|
||
|
||
const handleClick = () => {
|
||
if (props.disableLink) return
|
||
navigateTo(resolvedLink.value)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.base-user-avatar {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background-color: var(--avatar-placeholder-color, #f0f0f0);
|
||
/* 先用box-sizing: border-box，保证加border后宽高不变，圆形不变形 */
|
||
box-sizing: border-box;
|
||
border: 1.5px solid var(--normal-border-color);
|
||
transition: all 0.6s ease;
|
||
}
|
||
|
||
.base-user-avatar:hover {
|
||
box-shadow: 0 4px 24px rgba(251, 138, 138, 0.1);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.base-user-avatar:active {
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.base-user-avatar.is-rounded {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.base-user-avatar:not(.is-rounded) {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.base-user-avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
</style>
|