You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Photo.vue 1.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div class="box photo">
  3. <div class="box__photo">
  4. <video v-if="file.isVideo"
  5. class="photo__video"
  6. :src="file.url"
  7. autoplay
  8. muted
  9. loop
  10. @click="openPreview" />
  11. <div v-else
  12. class="photo__preview"
  13. :style="{ backgroundImage: `url('${file.url}')` }"
  14. @click="openPreview" />
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. props: {
  21. file: {
  22. type: Object,
  23. required: true,
  24. },
  25. },
  26. methods: {
  27. openPreview() {
  28. this.file.openItem()
  29. },
  30. },
  31. }
  32. </script>
  33. <style lang="scss" scoped>
  34. .photo {
  35. @apply mb-0;
  36. &::v-deep {
  37. .box__photo {
  38. background-image: url('~@/assets/images/repeated-square-dark.png');
  39. will-change: transform;
  40. height: 300px;
  41. }
  42. }
  43. }
  44. .photo__preview {
  45. @apply absolute top-0 bottom-0 left-0 right-0 z-10;
  46. @apply bg-contain bg-no-repeat bg-center;
  47. cursor: zoom-in;
  48. }
  49. .photo__video {
  50. @apply h-full w-full overflow-hidden;
  51. cursor: zoom-in;
  52. }
  53. </style>