image-view.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <!-- -->
  2. <template>
  3. <div class="image-view">
  4. <div class="swiper mySwiper">
  5. <div class="swiper-wrapper">
  6. <div class="swiper-slide" v-for="(i, index) in imageList" :key="index">
  7. <div class="swiper-zoom-container">
  8. <div
  9. :id="`vmRef_${index}`"
  10. class="swiper-zoom-target"
  11. :style="`background-image: url(${changeUrl(i.src)})`"
  12. ></div>
  13. </div>
  14. </div>
  15. </div>
  16. <div class="swiper-pagination"></div>
  17. <!-- <div class="swiper-button-next"></div>
  18. <div class="swiper-button-prev"></div> -->
  19. </div>
  20. </div>
  21. </template>
  22. <script setup lang="ts">
  23. import { onMounted, computed, nextTick } from 'vue';
  24. import { tagType, useSceneStore } from '/@/store/modules/scene';
  25. import { changeUrl } from '../common';
  26. const props = defineProps({
  27. data: {
  28. type: Object,
  29. default: {} as any as tagType,
  30. },
  31. metasHeight: {
  32. type: Number,
  33. default: null,
  34. },
  35. });
  36. const imageList = computed(() => {
  37. return props.data.media.image;
  38. });
  39. // const vmZoom = ref([]);
  40. // const zoomList = [];
  41. onMounted(() => {
  42. // let urls = [];
  43. (window as any).globalSwiper = new (window as any).Swiper('.mySwiper', {
  44. zoom: {
  45. toggle: false,
  46. maxRatio: 5,
  47. },
  48. pagination: {
  49. el: '.swiper-pagination',
  50. },
  51. on: {
  52. init: function (_) {
  53. // for (let i = 0; i < imageList.value.length; i++) {
  54. // vmZoom.value[i] = document.getElementById(`vmRef_${i}`)
  55. // zoomElement(vmZoom.value[i])
  56. // }
  57. },
  58. transitionStart: function (_) {
  59. // alert(swiper.previousIndex)
  60. // console.log(vmZoom.value[swiper.previousIndex].style.transform)
  61. // let scale = getTransform(vmZoom.value[swiper.previousIndex])
  62. },
  63. touchStart: function () {
  64. // console.log(swiper.previousIndex)
  65. },
  66. activeIndexChange: function (swiper) {
  67. console.log('event', swiper.activeIndex);
  68. const sceneStore = useSceneStore();
  69. sceneStore.setCurrentTagLayerIndex(swiper.activeIndex);
  70. // console.log(swiper.previousIndex)
  71. },
  72. },
  73. navigation: {
  74. nextEl: '.swiper-button-next',
  75. prevEl: '.swiper-button-prev',
  76. },
  77. });
  78. // const getTransform = el => {
  79. // var st = window.getComputedStyle(el, null)
  80. // var tr =
  81. // st.getPropertyValue('-webkit-transform') ||
  82. // st.getPropertyValue('-moz-transform') ||
  83. // st.getPropertyValue('-ms-transform') ||
  84. // st.getPropertyValue('-o-transform') ||
  85. // st.getPropertyValue('transform') ||
  86. // 'FAIL'
  87. // var values = tr.split('(')[1].split(')')[0].split(',')
  88. // var a = values[0]
  89. // var b = values[1]
  90. // var scale = Math.sqrt(a * a + b * b)
  91. // console.log('Scale: ' + scale)
  92. // return scale
  93. // // var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI))
  94. // // console.log('Rotate: ' + angle + 'deg')
  95. // }
  96. nextTick(() => {
  97. for (let i = 0; i < imageList.value.length; i++) {
  98. // console.log(vmZoom.value[i])
  99. // zoomElement(vmZoom.value[i])
  100. }
  101. });
  102. // for (let i = 0; i < imageList.value.length; i++) {
  103. // urls.push(common.changeUrl(imageList.value[i].src))
  104. // }
  105. // var obj = {
  106. // urls,
  107. // current: urls[0],
  108. // }
  109. // console.log(previewImage)
  110. // previewImage.start(obj)
  111. });
  112. </script>
  113. <style lang="scss" scoped>
  114. .image-view {
  115. width: 100%;
  116. height: 100%;
  117. // position: fixed;
  118. // top: 0;
  119. // left: 0;
  120. // transform: translate3d(0, 0, 0);
  121. // overflow: hidden;
  122. .swiper {
  123. width: 100%;
  124. height: 100%;
  125. .swiper-slide {
  126. transform: translate3d(0, 0, 0);
  127. overflow: hidden;
  128. }
  129. .swiper-zoom-container {
  130. width: 100%;
  131. height: 100%;
  132. transform: translate3d(0, 0, 0);
  133. // overflow: hidden;
  134. .swiper-zoom-target {
  135. width: 100%;
  136. height: 100%;
  137. background-position: center;
  138. background-size: contain;
  139. margin: 0 auto;
  140. transform: translate3d(0, 0, 0);
  141. // img {
  142. // width: 100%;
  143. // height: 100%;
  144. // }
  145. }
  146. }
  147. }
  148. }
  149. </style>
  150. <style lang="scss">
  151. .image-view {
  152. .swiper-pagination-bullet {
  153. background: #f2f2f2;
  154. }
  155. .swiper-pagination-bullet-active {
  156. background: var(--editor-main-color);
  157. }
  158. }
  159. </style>