2022-09-06 12:03:37 +00:00
|
|
|
<template>
|
2023-12-05 11:06:32 +00:00
|
|
|
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')" data-pc-name="avatar">
|
2023-04-27 12:18:17 +00:00
|
|
|
<slot>
|
2023-12-05 11:06:32 +00:00
|
|
|
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
|
2023-06-23 10:05:40 +00:00
|
|
|
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
|
2023-12-05 11:06:32 +00:00
|
|
|
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
|
|
|
|
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
|
2023-04-27 12:18:17 +00:00
|
|
|
</slot>
|
2022-09-06 12:03:37 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2023-05-30 08:47:45 +00:00
|
|
|
import BaseAvatar from './BaseAvatar.vue';
|
2023-04-21 12:04:27 +00:00
|
|
|
|
2022-09-06 12:03:37 +00:00
|
|
|
export default {
|
|
|
|
name: 'Avatar',
|
2023-05-23 13:16:38 +00:00
|
|
|
extends: BaseAvatar,
|
2022-09-14 11:26:01 +00:00
|
|
|
emits: ['error'],
|
2022-09-06 12:03:37 +00:00
|
|
|
methods: {
|
2023-08-02 09:18:47 +00:00
|
|
|
onError(event) {
|
|
|
|
this.$emit('error', event);
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
2022-09-14 11:26:01 +00:00
|
|
|
};
|
2022-09-06 12:03:37 +00:00
|
|
|
</script>
|