69 lines
1.8 KiB
Vue
Executable File
69 lines
1.8 KiB
Vue
Executable File
<template>
|
|
|
|
<div>
|
|
<div v-if="type === 'images'" class="bg-indigo-100 overflow-hidden">
|
|
<img :class="{ 'blur-sm': classActive }" class="object-contain h-48 w-full" :src="media.url" alt="">
|
|
</div>
|
|
<div v-if="type === 'videos'" class="overflow-hidden">
|
|
<video :class="{ 'blur-sm': classActive }" class="object-contain h-48 w-full" :src="media.url" controls></video>
|
|
</div>
|
|
<div v-if="type === 'musics'" class="overflow-hidden">
|
|
<div :class="{ 'blur-sm': classActive }" class="border border-indigo-100 flex flex-col items-center p-4">
|
|
<MusicNoteIcon class="flex-shrink-0 w-12 h-12 text-indigo-300" />
|
|
<div class="text-base text-gray font-medium">{{media.name}} / {{media.time}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
v-if="edit"
|
|
:class="[classActive ? 'bg-green' : 'bg-pink']"
|
|
class="block text-sm text-white w-full p-1"
|
|
type="button" @click="stateToggle(media.id)">
|
|
<span v-show="!classActive">Удалить</span>
|
|
<span v-show="classActive">Восстановить</span>
|
|
</button>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { MusicNoteIcon } from "@heroicons/vue/solid";
|
|
export default {
|
|
components: {
|
|
MusicNoteIcon,
|
|
},
|
|
props: {
|
|
media: Object,
|
|
edit: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "images",
|
|
},
|
|
},
|
|
emits: ["addRemoveId"],
|
|
data() {
|
|
return {
|
|
activeItemId: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
stateToggle(id) {
|
|
if (this.activeItemId === 0) {
|
|
this.activeItemId = id;
|
|
} else {
|
|
this.activeItemId = 0;
|
|
}
|
|
this.$emit("addRemoveId", id);
|
|
},
|
|
},
|
|
computed: {
|
|
classActive() {
|
|
return this.media.id === this.activeItemId;
|
|
},
|
|
},
|
|
};
|
|
</script>
|