vue图片视频预览

html

  <div class="preview">
        <ul :style="`transform: translateX(${translateX}vw); width: ${(privewList.length) * 100}vw`" ref="imgBox"
            :class="{ istranstion: istranstion }" @click="close">
            <!--  -->
            <li v-for="(item, index) in privewList" @touchstart.prevent="bindStarte">

                <img :src="item" alt="" v-if="usePoint.suffix(item) == 'image'" ref="img">
                <video :src="item" v-else controls preoad ref="img" muted=“muted”></video>

            </li>
        </ul>
    </div>

js代码

<script setup>
import { ref, reactive, computed, watchEffect, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, toRefs, toRaw, provide, inject, } from 'vue'
import _ from "lodash";
const emit = defineEmits(["close"]);
const img = ref(null);
const imgBox = ref(null);
const props = defineProps({
    privewList: {
        type: Array,
        default: [],
    },
    privewIndex: {
        type: Number,
        default: 0,
    },
});
let data = reactive({
    // 当前的index
    activeIndex: props.privewIndex,
    // 是否动画
    istranstion: false,
    translateX: 0,
    // vw和屏幕宽度px的比值
    conversionValue: 1,

});
let { activeIndex, istranstion, translateX, conversionValue } = toRefs(data);
onMounted(() => {
    let mobileWidth = document.documentElement.clientWidth;
    conversionValue.value = (Math.floor(100 / mobileWidth * 100)) / 100

})
// 滑动和 放大和旋转
function bindStarte($event) {
    let startX1 = $event.touches[0].clientX
    let startY1 = $event.touches[0].clientY
    let startX2 = 0
    let startY2 = 0



    if ($event.touches.length > 1) {
        let zoom = img.value[activeIndex.value].style.zoom ? img.value[activeIndex.value].style.zoom - 0 : 1
        let skew = img.value[activeIndex.value].style.transform ? getValue(img.value[activeIndex.value].style.transform) - 0 : 0

        startX2 = $event.touches[1].clientX
        startY2 = $event.touches[1].clientY

        // 计算斜边
        let hypotenuse1 = hypot(startX1, startX2, startY1, startY2)

        // 计算角度

        let IncludedAge1 = Angle(startX1, startX2, startY1, startY2)


        img.value[activeIndex.value].addEventListener("touchmove", move)

        function move(e) {
            if (e.touches.length > 1) {

                startX1 = e.touches[0].clientX
                startY1 = e.touches[0].clientY
                startX2 = e.touches[1].clientX
                startY2 = e.touches[1].clientY

                // 缩放大小也是斜边大小
                let hypotenuse2 = hypot(startX1, startX2, startY1, startY2)
                // 角度大小
                let IncludedAge2 = Angle(startX1, startX2, startY1, startY2)


                if (img.value[activeIndex.value].localName == "img") {

                    zoom = zoom + (hypotenuse2 - hypotenuse1) * 1 / 1000
                    if (zoom <= 1) {
                        zoom = 1
                    } else if (zoom >= 3) {
                        zoom = 3
                    } else {
                        zoom = zoom
                    }

                    img.value[activeIndex.value].style.zoom = zoom

                    let newSkew = skew + (IncludedAge2 - IncludedAge1)
                    if (newSkew < -360) {
                        newSkew = 0
                    } else if (newSkew > 360) {
                        newSkew = 0
                    }

                    img.value[activeIndex.value].style.transform = `rotate(${newSkew}deg)`

                }
            }



        }
        img.value[activeIndex.value].addEventListener("touchend", function (e) {
            imgBox.value.removeEventListener("touchmove", move);

            let newSkew = getValue(img.value[activeIndex.value].style.transform) - 0
            istranstion.value = true
            if (newSkew < 0) {
                if (newSkew < -30 && newSkew >= -120) {
                    newSkew = -90
                } else if (newSkew < -120 && newSkew >= -210) {
                    newSkew = -180
                } else if (newSkew < -210 && newSkew >= -300) {
                    newSkew = -270
                } else {
                    newSkew = 0
                }
            } else {
                if (newSkew > 30 && newSkew <= 120) {
                    newSkew = 90
                } else if (newSkew > 120 && newSkew <= 210) {
                    newSkew = 180
                } else if (newSkew > 210 && newSkew <= 300) {
                    newSkew = 270
                } else {
                    newSkew = 0
                }
            }
            img.value[activeIndex.value].style.transform = `rotate(${newSkew}deg)`
            imgBox.value.addEventListener("transitionend", function () {
                istranstion.value = false
            })
        })



    } else {
        imgBox.value.addEventListener("touchmove", move)

        function move(e) {
            let moveX = e.touches[0].clientX - startX1
            startX1 = e.touches[0].clientX
            translateX.value = translateX.value + moveX * conversionValue.value

        }
        imgBox.value.addEventListener("touchend", function (e) {
            imgBox.value.removeEventListener("touchmove", move);
            istranstion.value = true

            if (translateX.value <= (-(activeIndex.value * 100) - 30)) {
                if (activeIndex.value >= props.privewList.length - 1) {
                    activeIndex.value = activeIndex.value
                    translateX.value = -(activeIndex.value * 100)
                } else {
                    activeIndex.value = activeIndex.value + 1
                    translateX.value = -(activeIndex.value * 100)
                }
            } else if (translateX.value >= (-(activeIndex.value * 100) + 30)) {
                if (activeIndex.value <= 0) {
                    activeIndex.value = activeIndex.value
                    translateX.value = -(activeIndex.value * 100)
                } else {
                    activeIndex.value = activeIndex.value - 1
                    translateX.value = -(activeIndex.value * 100)
                }
            } else {
                translateX.value = -(activeIndex.value * 100)
            }
            imgBox.value.addEventListener("transitionend", function () {
                istranstion.value = false
                autoPlay()
            })
        })
    }





};




// 判断是否是视频从而实现自动播放
function autoPlay() {

    nextTick(() => {
        console.log(img.value)
        img.value.forEach((item) => {
            if (item.localName == "video") {
                item.pause()
                item.currentTime = 0;

            }
        });
        if (img.value[activeIndex.value].localName == 'video') {
            img.value[activeIndex.value].play();
        }
    })
}

// 勾股定理获得斜边长度来确定缩放大小
function hypot(startX1, startX2, startY1, startY2) {
    let distanceX = startX2 - startX1

    let distanceY = startY2 - startY1
    let hypotenuse = Math.floor(Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)))

    return hypotenuse
}
// 计算旋转角度
function Angle(startX1, startX2, startY1, startY2) {
    let distanceX = startX2 - startX1

    let distanceY = startY2 - startY1
    // 
    let IncludedAge = Math.atan2(distanceY, distanceX) * 180 / Math.PI;

    return IncludedAge
}

// 正则表达式获得旋转值
function getValue(str) {
    if (str) {
        let arr = /(rotate\()(.*?)(deg\))/.exec(str);

        return arr[2]
    } else {
        return 0
    }


}
function close() {
    emit("close");
}

// 导出方法
defineExpose({
    autoPlay,
});
</script>

css

<style scoped lang="less">
.preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99999;
}

.bigBox {
    height: 100vh;
}

ul {

    height: 100vh;
    display: flex;
    align-items: center;

    // background: green;
    // transition: all 0.3s ;
    li {
        width: 100vw;
        max-height: 100vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        img {
            max-width: 100vw;
            max-height: 100vh;
            width: auto;
            height: auto;

        }

        video {
            width: 100vw;
            height: 500px;
            border: 2px solid black;
        }
    }
}

.istranstion {
    transition: all 0.3s;
}
</style>

引入usePoint的方法

// 判断切割后缀名
  suffix(url) {
    // console.log(url)
    if(url==undefined||url==null){
      return "image"
    }
    var index = url.lastIndexOf('.')
    var filttype = url.slice(index + 1)
    if (['bmp', 'jpg', 'jpeg', 'png', 'gif', 'image'].some(function (item) {
        return item == filttype
      })) {
      return "image"
    } else if (['mp4'].some(function (item) {
        return item == filttype
      })) {
      // console.log(url)
      return "video"
    }
  },
    // 解决行内样式问题
  px2rem(px) {
    if (/%/gi.test(px)) {
      // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
      return px;
    } else {
     
     if(document.documentElement.clientWidth<=1200){
      return parseFloat(px) / 120 + "rem"; // 这里的37.5，和rootValue值对应
     }else{

      return parseFloat(px) / 192 + "rem"; // 这里的37.5，和rootValue值对应
     }
      
    }
  },