{"id":31,"date":"2025-06-26T11:10:19","date_gmt":"2025-06-26T03:10:19","guid":{"rendered":"https:\/\/kzqgy.cn\/?p=31"},"modified":"2025-06-26T11:31:51","modified_gmt":"2025-06-26T03:31:51","slug":"%e7%94%b5%e5%95%86%e5%9b%be%e7%89%87%e6%94%be%e5%a4%a7%e9%95%9c%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/kzqgy.cn\/index.php\/2025\/06\/26\/%e7%94%b5%e5%95%86%e5%9b%be%e7%89%87%e6%94%be%e5%a4%a7%e9%95%9c%e5%8a%9f%e8%83%bd\/","title":{"rendered":"\u7535\u5546\u56fe\u7247\u653e\u5927\u955c\u529f\u80fd"},"content":{"rendered":"
\n
<template><\/div>\n
\u00a0 <div class=”magnifier-system”><\/div>\n
\u00a0 \u00a0 <!– \u5c0f\u56fe\u533a\u57df –><\/div>\n
\u00a0 \u00a0 <el-popover<\/div>\n
\u00a0 \u00a0 \u00a0 placement=”right”<\/div>\n
\u00a0 \u00a0 \u00a0 trigger=”hover”<\/div>\n
\u00a0 \u00a0 \u00a0 v-model=”isActive”<\/div>\n
\u00a0 \u00a0 \u00a0 :popper-class=”‘magnifier-popover'”<\/div>\n
\u00a0 \u00a0 ><\/div>\n
\u00a0 \u00a0 \u00a0 <!– \u5927\u56fe\u533a\u57df\u5185\u5bb9 –><\/div>\n
\u00a0 \u00a0 \u00a0 <div class=”enlarged-area” :style=”bigContainerStyle”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <img :src=”bigImg” alt=”Enlarged” :style=”enlargedImgStyle” \/><\/div>\n
\u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 <!– \u5c0f\u56fe\u533a\u57df\u89e6\u53d1\u5668 –><\/div>\n
\u00a0 \u00a0 \u00a0 <template v-slot:reference><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 class=”preview-area”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ref=”previewArea”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @mousemove=”handleMouseMove”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @mouseenter=”activateMagnifier”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @mouseleave=”deactivateMagnifier”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=”img-container” :style=”smallContainerStyle”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img :src=”smallImg” alt=”Preview” class=”preview-img” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 \u00a0 <\/template><\/div>\n
\u00a0 \u00a0 <\/el-popover><\/div>\n
\u00a0 <\/div><\/div>\n
<\/template><\/div>\n
<script><\/div>\n
export default {<\/div>\n
\u00a0 name: ‘ResponsiveMagnifier’,<\/div>\n
\u00a0 props: {<\/div>\n
\u00a0 \u00a0 smallImg: String,<\/div>\n
\u00a0 \u00a0 bigImg: String,<\/div>\n
\u00a0 \u00a0 zoomLevel: { type: Number, default: 2 },<\/div>\n
\u00a0 \u00a0 imgSmall: {<\/div>\n
\u00a0 \u00a0 \u00a0 type: Object,<\/div>\n
\u00a0 \u00a0 \u00a0 default: () => ({ W: 100, H: 100 }),<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 imgBig: {<\/div>\n
\u00a0 \u00a0 \u00a0 type: Object,<\/div>\n
\u00a0 \u00a0 \u00a0 default: () => ({ W: 300, H: 300 }),<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 imgNumber: {<\/div>\n
\u00a0 \u00a0 \u00a0 type: Number,<\/div>\n
\u00a0 \u00a0 \u00a0 default: 1,<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 imgMoveWidth: {<\/div>\n
\u00a0 \u00a0 \u00a0 type: String,<\/div>\n
\u00a0 \u00a0 \u00a0 default: ’15’,<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 },<\/div>\n
\u00a0 data() {<\/div>\n
\u00a0 \u00a0 return {<\/div>\n
\u00a0 \u00a0 \u00a0 isActive: false,<\/div>\n
\u00a0 \u00a0 \u00a0 lensPosition: { x: 0, y: 0 },<\/div>\n
\u00a0 \u00a0 \u00a0 containerSize: { w: 0, h: 0 },<\/div>\n
\u00a0 \u00a0 };<\/div>\n
\u00a0 },<\/div>\n
\u00a0 computed: {<\/div>\n
\u00a0 \u00a0 smallContainerStyle() {<\/div>\n
\u00a0 \u00a0 \u00a0 return {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: `${this.imgSmall.W}px`,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: `${this.imgSmall.H}px`,<\/div>\n
\u00a0 \u00a0 \u00a0 };<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 bigContainerStyle() {<\/div>\n
\u00a0 \u00a0 \u00a0 return {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: `${this.imgBig.W}px`,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: `${this.imgBig.H}px`,<\/div>\n
\u00a0 \u00a0 \u00a0 };<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 imageOffset() {<\/div>\n
\u00a0 \u00a0 \u00a0 const { x, y } = this.lensPosition;<\/div>\n
\u00a0 \u00a0 \u00a0 const scaleX = this.imgBig.W \/ this.imgSmall.W;<\/div>\n
\u00a0 \u00a0 \u00a0 const scaleY = this.imgBig.H \/ this.imgSmall.H;<\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ \u8ba1\u7b97\u955c\u5934\u4e2d\u5fc3\u4f4d\u7f6e<\/div>\n
\u00a0 \u00a0 \u00a0 const lensCenterX = x + this.imgSmall.W \/ this.zoomLevel \/ 2;<\/div>\n
\u00a0 \u00a0 \u00a0 const lensCenterY = y + this.imgSmall.H \/ this.zoomLevel \/ 2;<\/div>\n
\u00a0 \u00a0 \u00a0 return {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 x: -(lensCenterX * scaleX – this.imgBig.W \/ 2),<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 y: -(lensCenterY * scaleY – this.imgBig.H \/ 2),<\/div>\n
\u00a0 \u00a0 \u00a0 };<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 enlargedImgStyle() {<\/div>\n
\u00a0 \u00a0 \u00a0 return {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 transform: `translate(${this.imageOffset.x}px, ${this.imageOffset.y}px)`,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: `${this.imgBig.W}px`,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: `${this.imgBig.H}px`,<\/div>\n
\u00a0 \u00a0 \u00a0 };<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 },<\/div>\n
\u00a0 watch: {<\/div>\n
\u00a0 \u00a0 ‘imgSmall.W'() {<\/div>\n
\u00a0 \u00a0 \u00a0 this.updateContainerSize();<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 ‘imgSmall.H'() {<\/div>\n
\u00a0 \u00a0 \u00a0 this.updateContainerSize();<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 ‘imgBig.W'() {<\/div>\n
\u00a0 \u00a0 \u00a0 this.updateContainerSize();<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 ‘imgBig.H'() {<\/div>\n
\u00a0 \u00a0 \u00a0 this.updateContainerSize();<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 },<\/div>\n
\u00a0 mounted() {<\/div>\n
\u00a0 \u00a0 this.updateContainerSize();<\/div>\n
\u00a0 },<\/div>\n
\u00a0 methods: {<\/div>\n
\u00a0 \u00a0 updateContainerSize() {<\/div>\n
\u00a0 \u00a0 \u00a0 this.$nextTick(() => {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.containerSize = {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 w: this.$refs.previewArea.querySelector(‘.img-container’).offsetWidth,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 h: this.$refs.previewArea.querySelector(‘.img-container’).offsetHeight,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 };<\/div>\n
\u00a0 \u00a0 \u00a0 });<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 activateMagnifier() {<\/div>\n
\u00a0 \u00a0 \u00a0 this.isActive = true;<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 deactivateMagnifier() {<\/div>\n
\u00a0 \u00a0 \u00a0 this.isActive = false;<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 handleMouseMove(e) {<\/div>\n
\u00a0 \u00a0 \u00a0 if (!this.isActive) return;<\/div>\n
\u00a0 \u00a0 \u00a0 const container = this.$refs.previewArea.querySelector(‘.img-container’);<\/div>\n
\u00a0 \u00a0 \u00a0 const rect = container.getBoundingClientRect();<\/div>\n
\u00a0 \u00a0 \u00a0 let x = e.clientX – rect.left – window.pageXOffset;<\/div>\n
\u00a0 \u00a0 \u00a0 let y = e.clientY – rect.top – window.pageYOffset;<\/div>\n
\u00a0 \u00a0 \u00a0 x = Math.max(0, Math.min(x, rect.width));<\/div>\n
\u00a0 \u00a0 \u00a0 y = Math.max(0, Math.min(y, rect.height));<\/div>\n
\u00a0 \u00a0 \u00a0 const lensWidth = this.imgSmall.W \/ this.zoomLevel;<\/div>\n
\u00a0 \u00a0 \u00a0 const lensHeight = this.imgSmall.H \/ this.zoomLevel;<\/div>\n
\u00a0 \u00a0 \u00a0 this.lensPosition = {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 x: Math.min(Math.max(x – lensWidth \/ 2, 0), rect.width – lensWidth),<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 y: Math.min(Math.max(y – lensHeight \/ 2, 0), rect.height – lensHeight),<\/div>\n
\u00a0 \u00a0 \u00a0 };<\/div>\n
\u00a0 \u00a0 },<\/div>\n
\u00a0 },<\/div>\n
};<\/div>\n
<\/script><\/div>\n
<style scoped><\/div>\n
.magnifier-system {<\/div>\n
\u00a0 display: flex;<\/div>\n
\u00a0 align-items: flex-start;<\/div>\n
}<\/div>\n
.preview-area {<\/div>\n
\u00a0 position: relative;<\/div>\n
\u00a0 border: 1px solid #e0e0e0;<\/div>\n
\u00a0 overflow: hidden;<\/div>\n
\u00a0 cursor: crosshair;<\/div>\n
}<\/div>\n
.img-container {<\/div>\n
\u00a0 position: relative;<\/div>\n
\u00a0 overflow: hidden;<\/div>\n
}<\/div>\n
.preview-img {<\/div>\n
\u00a0 width: 100%;<\/div>\n
\u00a0 height: 100%;<\/div>\n
\u00a0 object-fit: contain;<\/div>\n
}<\/div>\n
.magnifier-lens {<\/div>\n
\u00a0 position: absolute;<\/div>\n
\u00a0 backdrop-filter: blur(2px);<\/div>\n
\u00a0 pointer-events: none;<\/div>\n
\u00a0 transition: 0.05s linear;<\/div>\n
}<\/div>\n
.enlarged-area {<\/div>\n
\u00a0 border: 1px solid #e0e0e0;<\/div>\n
\u00a0 overflow: hidden;<\/div>\n
\u00a0 background: #fff;<\/div>\n
}<\/div>\n
.enlarged-img {<\/div>\n
\u00a0 position: absolute;<\/div>\n
\u00a0 width: auto;<\/div>\n
\u00a0 height: auto;<\/div>\n
\u00a0 min-width: 100%;<\/div>\n
\u00a0 min-height: 100%;<\/div>\n
\u00a0 transition: transform 0.05s linear;<\/div>\n
}<\/div>\n
<\/style><\/div>\n
<style><\/div>\n
\/* \u8986\u76d6el-popover\u7684\u6837\u5f0f *\/<\/div>\n
.magnifier-popover {<\/div>\n
\u00a0 padding: 0 !important;<\/div>\n
\u00a0 border: none !important;<\/div>\n
\u00a0 \/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); *\/<\/div>\n
}<\/div>\n
.magnifier-popover .popper__arrow {<\/div>\n
\u00a0 display: none !important;<\/div>\n
}<\/div>\n
<\/style><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

<template> \u00a0 <div class=”… Read more\u7535\u5546\u56fe\u7247\u653e\u5927\u955c\u529f\u80fd<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31","post","type-post","status-publish","format-standard","hentry","category-all","content-layout-excerpt-thumb"],"_links":{"self":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":3,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/posts\/31\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kzqgy.cn\/index.php\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}