图片拖拽、预览、翻转

<template>
	<div>
		<div class="Back">
			<img v-for="(item, index) in ImgList" :key="item.id" :src="item.img" alt="" ref="mask"
				@click="maskImg(item, index)" style="width: 100px; height: 100px" />
		</div>

    <div class="preView" v-if="HideImg">
      <!-- 关闭按钮 -->
      <div class="closeBlock" @click="ClosePreviess" v-show="enlargeImG">
        <img src="../assets/chose.png" alt="" />
      </div>
      <!-- 预览图片 -->

      <div
        :class="
          enlargeStatus == 1
            ? 'previewimages'
            : enlargeStatus == 0
            ? 'previewImage'
            : ''
        "
      >
        <div :class="gray==1?'Exhibition':'pig'" v-for="item in ImgList" :key="item.id">
					<img  :src="item.img" alt="" :style="styleImg" ref="imagePig" class="imge" @mousedown="move"
						v-if="preViewID == item.id? (item.switch = true) : (item.switch = false)
            " />
		</div>
      </div>

      <!-- 导航图标 -->
      <div class="BigNav" v-show="enlargeImG">
        <img src="../assets/u120.png" alt="" />
        <img src="../assets/u110.png" alt="" />
        <img src="../assets/u100.png" @click="magnify" alt="" />
		<img src="../assets/u190.png" @click="restore" alt="" />
        <img src="../assets/u170.png" alt="" @click="pageUp" />
        <img src="../assets/u160.png" alt="" @click="RotatePictures" />
        <img src="../assets/u150.png" alt="" @click="nextPage" />
        <img src="../assets/u200.png" alt="" @click="rotate_left" />
        <img src="../assets/u180.png" alt="" @click="rotates_right" />
        <img src="../assets/u130.png" alt="" @click="rotate_mirror" />
        <img src="../assets/u140.png" alt="" @click="rotate_mirrors" />
      </div>
      <!-- 底部小图片 -->
      <div class="inpuileImg" v-show="enlargeImG">
        <img
          v-for="(item, index) in ImgList"
          :key="item.id"
          :src="item.img"
          :class="preViewIndex == index ? 'inpuile' : 'mask_img'"
          @click="preViewImg(item, index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
import { ref, onMounted, markRaw } from "vue";
import { CLOSING } from "ws";
export default {
  name: "HomeView",
  components: {
    // HelloWorld
  },
  setup() {
    const sil = ref(null);
    const mask = ref(null);
    const enlargeImG = ref(true);
    const enlargeStatus = ref(0);
    const ImgList = ref([
      {
        img: "https://s1.ax1x.com/2022/06/14/XIirHf.png",
        id: "1",
        switch: false,
      },
      {
        img: "https://s1.ax1x.com/2022/06/23/j9vVHO.jpg",
        id: "2",
        switch: false,
      },
      {
        img: "https://s1.ax1x.com/2022/06/23/j9vmUe.jpg",
        id: "3",
        switch: false,
      },
      {
        img: "https://www.helloimg.com/images/2022/06/22/ZnxrhX.png",
        id: "4",
        switch: false,
      },
    ]);
    const isFullscreen = ref(false);
    const PreviousImgList = ref([]);
	const sizeMess=ref([]);
    const quanp = ref(0);
    // 判断点击状态值
    const preViewIndex = ref(0);
    // 判断点击显示隐藏状态值
    const preViewID = ref(0);
    onMounted(() => {
      screenfull.on("change", change);
    });
    // 显示隐藏值
    const HideImg = ref(false);
    // 点击图片数组开始预览
    const maskImg = (item, i) => {
      styleImg.value = null;
      HideImg.value = true;
      preViewID.value = item.id;
      preViewIndex.value = i;
    };

    // 点击底部小图片
    const preViewImg = (item, i) => {
      preViewIndex.value = i;
      preViewID.value = item.id;
	  gray.value=1
	  styleImg.value=null
    };

    // 关闭按钮
    const ClosePreviess = () => {
      if (enlargeStatus.value == 1) {
        enlargeStatus.value = 0;
        enlargeImG.value = true;
      } else {
        HideImg.value = false;
      }
    };
    // 上一张
    const pageUp = () => {
		styleImg.value=null
      if (preViewID.value == ImgList.value[0].id) {
		let i = ImgList.value.length-1
		preViewID.value = ImgList.value[i].id
      } else {
        preViewID.value--;
        preViewIndex.value--;
      }
    };
    // 下一张
    const nextPage = () => {
		styleImg.value=null
      if (preViewID.value < ImgList.value.length) {
        preViewID.value++;
        preViewIndex.value++;
      } else if (preViewID.value >= ImgList.value.length) {
        preViewID.value = ImgList.value[0].id;
        preViewIndex.value = 0;
      }
    };
    var clearsetI = ref(null);

    //轮播图片
    const RotatePictures = () => {
      screenfull.toggle();
    };

    document.onkeyup = (e) => {
      if (HideImg.value == true) {
        if (e.keyCode == 37) {
			styleImg.value=null
          if (preViewID.value == ImgList.value[0].id) {
			let i = ImgList.value.length-1;
			preViewID.value = ImgList.value[i].id
          } else {
            preViewID.value--;
            preViewIndex.value--;
          }
        } else if (e.keyCode == 39) {
			styleImg.value=null
          if (preViewID.value < ImgList.value.length) {
            preViewID.value++;
            preViewIndex.value++;
          } else if (preViewID.value >= ImgList.value.length) {
            preViewID.value = ImgList.value[0].id;
            preViewIndex.value = 0;
          }
        }
      }
    };
    const change = () => {
      isFullscreen.value = screenfull.isFullscreen;
      if (isFullscreen.value == true) {
        quanp.value = 1;
        enlargeStatus.value = 1;
        enlargeImG.value = false;
        clearsetI.value = setInterval(() => {
          if (preViewID.value < ImgList.value.length) {
            preViewID.value++;
            preViewIndex.value++;
          } else if (preViewID.value >= ImgList.value.length) {
            preViewID.value = ImgList.value[0].id;
            preViewIndex.value = 0;
          }
        }, 3000);
      } else if (isFullscreen.value == false) {
        enlargeStatus.value = 0;
        enlargeImG.value = true;
        clearInterval(clearsetI.value);
      }
    };
    // 旋转
    const styleImg = ref(null);
    // 逆时针旋转
    const deg = ref(0);
    const rotate_left = () => {
      if (degs.value != 0) {
        degs.value -= 90;
        styleImg.value = `transform:rotateZ(${degs.value}deg);transition:0.5s; `;
      } else if (degs.value == 0) {
        deg.value += 90;
        styleImg.value = `transform:rotateZ(${-deg.value}deg);transition:0.5s; `;
      }
    };
    // 正时针旋转
    const degs = ref(0);
    const rotates_right = () => {
      if (deg.value != 0) {
        deg.value -= 90;
        styleImg.value = `transform:rotateZ(${-deg.value}deg);transition:0.5s; `;
      } else if (deg.value == 0) {
        degs.value += 90;
        styleImg.value = `transform:rotateZ(${degs.value}deg);transition:0.5s; `;
      }
    };
    // 左右
    const deg_mirror = ref(0);
    const rotate_mirror = () => {
      deg_mirror.value += 180;
      styleImg.value = `transform:rotateY(${deg_mirror.value}deg);transition:0.5s`;
    };
    // 上下
    const deg_mirrors = ref(0);
    const rotate_mirrors = () => {
      deg_mirrors.value += 180;
      styleImg.value = `transform:rotateX(${-deg_mirrors.value}deg);transition:0.5s`;
    };
	// 鼠标拖拽
			const move = function(e) {
				e.preventDefault();
				// 获取元素
				var left = document.querySelector(".preView");
				var img = document.querySelector(".imge");
				var x = e.pageX - img.offsetLeft;
				var y = e.pageY - img.offsetTop;
				// 添加鼠标移动事件
				left.addEventListener("mousemove", move);

				function move(e) {
					img.style.left = e.pageX - x + "px";
					img.style.top = e.pageY - y + "px";
				}
				// 添加鼠标抬起事件，鼠标抬起，将事件移除
				img.addEventListener("mouseup", function() {
					left.removeEventListener("mousemove", move);
				});
				// 鼠标离开父级元素，把事件移除
				left.addEventListener("mouseout", function() {
					left.removeEventListener("mousemove", move);
				});
			}
			const gray=ref(1);
			const magnify=function(){
				if(gray.value==1){
					gray.value=2
				}else{
					gray.value=1
				}
				     var img_url = document.querySelector('.imge').src
					 var img = new Image();
					 img.src = img_url;
					 let size=[img.width,img.height]
					 sizeMess.value=size
           console.log(img.width);
			}
			const restore=function(){
				gray.value=1
			}
    return {
	  gray,
	  sizeMess,
	  restore,
	  magnify,
	  move,
      change,
      clearsetI,
      quanp,
      isFullscreen,
      enlargeStatus,
      enlargeImG,
      RotatePictures,
      nextPage,
      pageUp,
      PreviousImgList,
      HideImg,
      markRaw,
      ClosePreviess,
      preViewID,
      preViewIndex,
      preViewImg,
      CLOSING,
      maskImg,
      mask,
      ImgList,
      sil,
      deg,
      rotate_left,
      styleImg,
      rotates_right,
      degs,
      rotate_mirror,
      deg_mirror,
      rotate_mirrors,
      deg_mirrors,
    };
  },
};
</script>
<style>
	* {
		margin: 0;
		padding: 0;
		user-select: none;
	}


	.Exhibition {
		width: 70%;
		height: 70%;
		margin-top: 5%;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.pig {
		width: 100%;
		height: 100%;
		margin-top: 5%;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Exhibition img {
		position: absolute;
		max-width: 90%;
		max-height: 90%;
		cursor: move;
		z-index: 99;
	}
	.pig img {
		position: absolute;
		transform: scale(2);  
		cursor: move;
		z-index: 99;
	}


.preView {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(127, 127, 127, 0.6);
  top: 0;
}
.inpuileImg {
  width: 100%;
  height: 15%;
  background-color: #3f3f3f;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  z-index: 999;
}
.mask_img {
  width: 8%;
  height: 95%;
  margin-left: 1%;
  position: relative;
  filter: grayscale(80%);
}
.inpuileImg .mask_img:hover {
  filter: grayscale(20%);
}
.inpuile {
  width: 8%;
  height: 95%;
  margin-left: 1%;
  position: relative;
}
.BigNav {
  width: 100%;
  height: 10%;
  position: absolute;
  bottom: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.BigNav img {
  width: 5%;
  height: 90%;
  margin-left: 1%;
}
.closeBlock {
  width: 50px;
  height: 50px;
  background-color: #3f3f3f;
  position: absolute;
  right: 0;
  border-radius: 0px 0px 0px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.closeBlock img {
  position: absolute;
  margin-top: -10%;
  margin-left: 10%;
  color: #fafafa;
}
.closeBlock:hover {
  background-color: #fb5430;
  cursor: pointer;
}
.previewImage {
  width: 100%;
  height: 65%;
  margin-top: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Previous {
  width: 15%;
  height: 100%;
}
.previewimages {
  width: 100%;
  height: 92%;
  margin-top: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>