50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
|
<li
|
|
data-bs-toggle="tooltip"
|
|
data-popup="tooltip-custom"
|
|
data-bs-placement="top"
|
|
class="avatar pull-up"
|
|
:aria-label="data.MEMBERSEQ"
|
|
:data-bs-original-title="getTooltipTitle(data)">
|
|
<img
|
|
class="rounded-circle user-avatar border border-3 object-fit-cover"
|
|
:src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
|
|
:style="`border-color: ${data.usercolor} !important; width: 90%; height: 90%;`"
|
|
@error="$event.target.src = '/img/icons/icon.png'"
|
|
alt="user"
|
|
/>
|
|
</li>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useUserInfoStore } from '@s/useUserInfoStore';
|
|
import $api from '@api';
|
|
import { nextTick, onMounted } from 'vue';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
const userStore = useUserInfoStore();
|
|
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
|
|
|
onMounted(async () => {
|
|
nextTick(() => {
|
|
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
|
tooltips.forEach((tooltip) => {
|
|
new bootstrap.Tooltip(tooltip);
|
|
});
|
|
});
|
|
});
|
|
const getTooltipTitle = (user) => {
|
|
return user.MEMBERSEQ === userStore.user.id ? '나' : user.MEMBERNAM;
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|