|
|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div class="box">
|
|
|
+ <div
|
|
|
+ class="middle"
|
|
|
+ @mouseover="mouseOverAndOut('block')"
|
|
|
+ @mouseout="mouseOverAndOut('none')"
|
|
|
+ @mousemove="move($event)"
|
|
|
+ >
|
|
|
+ <img :src="src" />
|
|
|
+ <div class="shade"></div>
|
|
|
+ <div class="big">
|
|
|
+ <img :src="src" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-box">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="(s, si) in img_list"
|
|
|
+ @mouseenter="asd(si)"
|
|
|
+ :class="s !== src ? 'a1' : 'a2'"
|
|
|
+ >
|
|
|
+ <img :src="s" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import resToken from "@/mixins/resToken";
|
|
|
+// import { isnumber } from "@/utils/validate";
|
|
|
+export default {
|
|
|
+ name: "aaa",
|
|
|
+ props: ["pList"],
|
|
|
+ mixins: [resToken],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ img_list: [],
|
|
|
+ src: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // pList: function (val) {
|
|
|
+ // // console.log(pList);
|
|
|
+ // console.log(val);
|
|
|
+ // // this.showModelThis = val;
|
|
|
+ // // if (val) {
|
|
|
+ // // this.initForm();
|
|
|
+ // // }
|
|
|
+ // },
|
|
|
+ // showModelThis(val) {
|
|
|
+ // if (!val) {
|
|
|
+ // this.$emit("cancel");
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.img_list = [];
|
|
|
+ if (typeof this.pList === "string") {
|
|
|
+ this.img_list = (this.pList || "").split(",");
|
|
|
+ } else {
|
|
|
+ this.img_list = this.pList;
|
|
|
+ }
|
|
|
+ if (this.img_list.length > 0) {
|
|
|
+ this.src = this.img_list[0];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ asd(index) {
|
|
|
+ this.src = this.img_list[index];
|
|
|
+ },
|
|
|
+ mouseOverAndOut(val) {
|
|
|
+ const box = document.querySelector(".box");
|
|
|
+ box.querySelector(".shade").style.display = val;
|
|
|
+ box.querySelector(".big").style.display = val;
|
|
|
+ },
|
|
|
+ move(evnt) {
|
|
|
+ const box = document.querySelector(".box");
|
|
|
+ const middle = box.querySelector(".middle");
|
|
|
+ const shade = box.querySelector(".shade");
|
|
|
+ const bigImg = box.querySelector(".big>img");
|
|
|
+ // 拖拽 - 获取光标位置
|
|
|
+ const e = evnt || window.event;
|
|
|
+ const x = e.pageX;
|
|
|
+ const y = e.pageY;
|
|
|
+ let l = x - box.offsetLeft - shade.clientWidth / 2;
|
|
|
+ if (l <= 0) {
|
|
|
+ l = 0;
|
|
|
+ }
|
|
|
+ if (l >= middle.clientWidth - shade.clientWidth) {
|
|
|
+ l = middle.clientWidth - shade.clientWidth;
|
|
|
+ }
|
|
|
+ shade.style.left = l + "px";
|
|
|
+ let t = y - box.offsetTop - shade.clientHeight / 2;
|
|
|
+ if (t <= 0) {
|
|
|
+ t = 0;
|
|
|
+ }
|
|
|
+ if (t >= middle.clientHeight - shade.clientHeight) {
|
|
|
+ t = middle.clientHeight - shade.clientHeight;
|
|
|
+ }
|
|
|
+ shade.style.top = t + "px";
|
|
|
+ // 计算比例
|
|
|
+ const percentX = shade.offsetLeft / middle.clientWidth;
|
|
|
+ const percentY = shade.offsetTop / middle.clientHeight;
|
|
|
+ // 根据比例计算大图应该定位的值
|
|
|
+ const bigX = bigImg.clientWidth * percentX;
|
|
|
+ const bigY = bigImg.clientHeight * percentY;
|
|
|
+ // 将值设置给大图的定位
|
|
|
+ bigImg.style.left = -bigX + "px";
|
|
|
+ bigImg.style.top = -bigY + "px";
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .middle {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ position: relative;
|
|
|
+ & > img {
|
|
|
+ display: inline;
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+ .shade {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: s(255, 255, 0, 0.5);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .big {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ position: absolute;
|
|
|
+ left: 105%;
|
|
|
+ top: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ display: none;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ img {
|
|
|
+ width: 800px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-box {
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ margin: 0 5px 0 0;
|
|
|
+ &.a1 {
|
|
|
+ border: 2px solid transparent;
|
|
|
+ }
|
|
|
+ &.a2 {
|
|
|
+ border: 2px solid #f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ float: left;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
