65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useSession } from 'src/composables/useSession';
|
|
|
|
const $props = defineProps({
|
|
collection: {
|
|
type: [String, Number],
|
|
default: 'Images',
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '200x200',
|
|
},
|
|
zoomSize: {
|
|
type: String,
|
|
required: true,
|
|
default: 'lg',
|
|
},
|
|
id: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const show = ref(false);
|
|
const token = useSession().getTokenMultimedia();
|
|
const timeStamp = `timestamp=${Date.now()}`;
|
|
const url = computed(
|
|
() =>
|
|
`/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp}`
|
|
);
|
|
</script>
|
|
<template>
|
|
<QImg
|
|
:src="url"
|
|
class="img"
|
|
v-bind="$attrs"
|
|
@click="show = !show"
|
|
spinner-color="primary"
|
|
:ratio="1"
|
|
/>
|
|
<QDialog v-model="show" v-if="$props.zoomSize">
|
|
<QImg
|
|
:src="url"
|
|
class="img_zoom"
|
|
v-bind="$attrs"
|
|
spinner-color="primary"
|
|
:ratio="1"
|
|
style="border-radius: 0%"
|
|
/>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.img {
|
|
cursor: zoom-in;
|
|
}
|
|
.rounded {
|
|
border-radius: 50%;
|
|
}
|
|
.img_zoom {
|
|
width: 72%;
|
|
height: auto;
|
|
}
|
|
</style>
|