123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- <!-- -->
- <template>
- <div class="image-view">
- <div class="swiper mySwiper">
- <div class="swiper-wrapper">
- <div class="swiper-slide" v-for="(i, index) in imageList" :key="index">
- <div class="swiper-zoom-container">
- <div
- :id="`vmRef_${index}`"
- class="swiper-zoom-target"
- :style="`background-image: url(${changeUrl(i.src)})`"
- ></div>
- </div>
- </div>
- </div>
- <div class="swiper-pagination"></div>
- <!-- <div class="swiper-button-next"></div>
- <div class="swiper-button-prev"></div> -->
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { onMounted, computed, nextTick } from 'vue';
- import { tagType, useSceneStore } from '/@/store/modules/scene';
- import { changeUrl } from '../common';
- const props = defineProps({
- data: {
- type: Object,
- default: {} as any as tagType,
- },
- metasHeight: {
- type: Number,
- default: null,
- },
- });
- const imageList = computed(() => {
- return props.data.media.image;
- });
- // const vmZoom = ref([]);
- // const zoomList = [];
- onMounted(() => {
- // let urls = [];
- (window as any).globalSwiper = new (window as any).Swiper('.mySwiper', {
- zoom: {
- toggle: false,
- maxRatio: 5,
- },
- pagination: {
- el: '.swiper-pagination',
- },
- on: {
- init: function (_) {
- // for (let i = 0; i < imageList.value.length; i++) {
- // vmZoom.value[i] = document.getElementById(`vmRef_${i}`)
- // zoomElement(vmZoom.value[i])
- // }
- },
- transitionStart: function (_) {
- // alert(swiper.previousIndex)
- // console.log(vmZoom.value[swiper.previousIndex].style.transform)
- // let scale = getTransform(vmZoom.value[swiper.previousIndex])
- },
- touchStart: function () {
- // console.log(swiper.previousIndex)
- },
- activeIndexChange: function (swiper) {
- console.log('event', swiper.activeIndex);
- const sceneStore = useSceneStore();
- sceneStore.setCurrentTagLayerIndex(swiper.activeIndex);
- // console.log(swiper.previousIndex)
- },
- },
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
- });
- // const getTransform = el => {
- // var st = window.getComputedStyle(el, null)
- // var tr =
- // st.getPropertyValue('-webkit-transform') ||
- // st.getPropertyValue('-moz-transform') ||
- // st.getPropertyValue('-ms-transform') ||
- // st.getPropertyValue('-o-transform') ||
- // st.getPropertyValue('transform') ||
- // 'FAIL'
- // var values = tr.split('(')[1].split(')')[0].split(',')
- // var a = values[0]
- // var b = values[1]
- // var scale = Math.sqrt(a * a + b * b)
- // console.log('Scale: ' + scale)
- // return scale
- // // var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI))
- // // console.log('Rotate: ' + angle + 'deg')
- // }
- nextTick(() => {
- for (let i = 0; i < imageList.value.length; i++) {
- // console.log(vmZoom.value[i])
- // zoomElement(vmZoom.value[i])
- }
- });
- // for (let i = 0; i < imageList.value.length; i++) {
- // urls.push(common.changeUrl(imageList.value[i].src))
- // }
- // var obj = {
- // urls,
- // current: urls[0],
- // }
- // console.log(previewImage)
- // previewImage.start(obj)
- });
- </script>
- <style lang="scss" scoped>
- .image-view {
- width: 100%;
- height: 100%;
- // position: fixed;
- // top: 0;
- // left: 0;
- // transform: translate3d(0, 0, 0);
- // overflow: hidden;
- .swiper {
- width: 100%;
- height: 100%;
- .swiper-slide {
- transform: translate3d(0, 0, 0);
- overflow: hidden;
- }
- .swiper-zoom-container {
- width: 100%;
- height: 100%;
- transform: translate3d(0, 0, 0);
- // overflow: hidden;
- .swiper-zoom-target {
- width: 100%;
- height: 100%;
- background-position: center;
- background-size: contain;
- margin: 0 auto;
- transform: translate3d(0, 0, 0);
- // img {
- // width: 100%;
- // height: 100%;
- // }
- }
- }
- }
- }
- </style>
- <style lang="scss">
- .image-view {
- .swiper-pagination-bullet {
- background: #f2f2f2;
- }
- .swiper-pagination-bullet-active {
- background: var(--editor-main-color);
- }
- }
- </style>
|