primevue-mirror/components/lib/avatar/Avatar.vue

33 lines
1.0 KiB
Vue
Raw Normal View History

2022-09-06 12:03:37 +00:00
<template>
2023-06-23 10:05:40 +00:00
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="getPTOptions('root')" data-pc-name="avatar">
2023-04-27 12:18:17 +00:00
<slot>
2023-06-23 10:05:40 +00:00
<span v-if="label" :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="getPTOptions('icon')" />
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="getPTOptions('image')" />
2023-04-27 12:18:17 +00:00
</slot>
2022-09-06 12:03:37 +00:00
</div>
</template>
<script>
import BaseAvatar from './BaseAvatar.vue';
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: {
onError(event) {
this.$emit('error', event);
2023-06-23 10:05:40 +00:00
},
getPTOptions(key) {
return this.ptm(key, {
parent: {
instance: this.$parent
}
});
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>