效果如下:
首先,有一个放大镜的DOM结构
- <template>
- <div class="spec-preview">
-
- <img :src="imgObj.imgUrl" />
-
- <div class="event">div>
-
- <div class="big">
- <img :src="imgObj.imgUrl" />
- div>
-
- <div class="mask">div>
- div>
- template>
这里img的src是通过父组件传过来的imgList来展示的,可以换成自己的任意图
交代一下:遮罩层和展示图都是正方形的,而且遮罩层的宽高都是展示图的一半
分别要绑定鼠标移动事件,和获取两个元素节点,分别是遮罩层和放大图
- <template>
- <div class="spec-preview">
- <img :src="imgObj.imgUrl" />
- <div class="event" @mousemove="handler">div>
- <div class="big">
- <img :src="imgObj.imgUrl" ref="big" />
- div>
-
- <div class="mask" ref="mask">div>
- div>
- template>
vue3中如何获得ref绑定的节点元素呢?
首先,要知道在vue2中获取ref节点元素是很简单的,只需要this.$refs.mask即可。但是vue3中是没有this.$refs的。
- import { computed, getCurrentInstance, onMounted, ref } from "vue";
- export default {
- name: "ZoomIndex",
- props: ["skuImageList"],
- setup(props) {
- let mask = ref(null);
- let big = ref(null);
- function handler(event) {
- let handlerMask = mask.value;
- let handlerBig = big.value;
- }
- return {
- handler,
- mask,
- big,
- };
- },
- };
为了结构清楚,我把其他不涉及这个案例的代码都删掉了。handlerMask和handlerBig就是我们想要获取的节点。
获取到节点后,就可以写相应的放大器实现代码了
首先要获取event的offserX也就是我们鼠标距离左侧边框的距离 ,然后还需要减去遮罩层本身宽度的一半,高度同理。并且添加约束条件,让这个遮罩层不能出展示区域。最后就只需要修改相应元素的left和top属性即可了(当然,这里肯定是要用到绝对定位的,子绝父相)
- function handler(event) {
- let handlerMask = mask.value;
- let left = event.offsetX - handlerMask.offsetWidth / 2;
- let top = event.offsetY - handlerMask.offsetHeight / 2;
- // 约束范围
- if (left <= 0) left = 0;
- if (left >= handlerMask.offsetWidth) left = handlerMask.offsetWidth;
- if (top <= 0) top = 0;
- if (top >= handlerMask.offsetHeight) top = handlerMask.offsetHeight;
- // 修改元素的left|top属性值
- handlerMask.style.left = left + "px";
- handlerMask.style.top = top + "px";
- // 修改放大图
- let handlerBig = big.value;
- handlerBig.style.left = -2 * left + "px";
- handlerBig.style.top = -2 * top + "px";
- }
这里稍微有疑惑的可能就是放大图为什么是-2去相乘。 首先根据前面的介绍,我们的展示图和放大图的大小是一致的,都是正方形。而遮罩层的宽高都是其一半。所以要把相应的遮罩层的图片放大,就是简单的乘以2即可。那为什么是负数。这就是涉及到放大图的移动方向了。我们遮罩层向左移动,起始放大图是相应的向右移动的。
- .event {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 998;
- }
-
- .mask {
- width: 50%;
- height: 50%;
- background-color: rgba(0, 255, 0, 0.3);
- position: absolute;
- left: 0;
- top: 0;
- display: none;
- }
-
- .big {
- width: 100%;
- height: 100%;
- position: absolute;
- top: -1px;
- left: 100%;
- border: 1px solid #aaa;
- overflow: hidden;
- z-index: 998;
- display: none;
- background: white;
- }
- img {
- width: 200%;
- max-width: 200%;
- height: 200%;
- position: absolute;
- left: 0;
- top: 0;
- }
根据上面的展示(我把big里面的overflow:hidden去掉后的),可以看到,其实图片的大小的是展示图和放大镜大小的2倍,超出部分是隐藏的。也就是向着相反的方向移动,使得我们遮罩层的区域放大后正好在放大镜的展示区域中。
完整代码如下:
- <template>
- <div class="spec-preview">
- <img :src="imgObj.imgUrl" />
- <div class="event" @mousemove="handler">div>
- <div class="big">
- <img :src="imgObj.imgUrl" ref="big" />
- div>
-
- <div class="mask" ref="mask">div>
- div>
- template>
-
- <script>
- import { computed, getCurrentInstance, onMounted, ref } from "vue";
- export default {
- name: "ZoomIndex",
- props: ["skuImageList"],
- setup(props) {
- const internalInstance = getCurrentInstance(); //当前组件实例
- const $bus = internalInstance.appContext.config.globalProperties.$bus;
- // console.log(props);
- let currentIndex = ref(0);
- let mask = ref(null);
- let big = ref(null);
- let imgObj = computed({
- get() {
- return props.skuImageList[currentIndex.value] || {};
- },
- });
- function handler(event) {
- let handlerMask = mask.value;
- let left = event.offsetX - handlerMask.offsetWidth / 2;
- let top = event.offsetY - handlerMask.offsetHeight / 2;
- // 约束范围
- if (left <= 0) left = 0;
- if (left >= handlerMask.offsetWidth) left = handlerMask.offsetWidth;
- if (top <= 0) top = 0;
- if (top >= handlerMask.offsetHeight) top = handlerMask.offsetHeight;
- // 修改元素的left|top属性值
- handlerMask.style.left = left + "px";
- handlerMask.style.top = top + "px";
- // 修改放大图
- let handlerBig = big.value;
- handlerBig.style.left = -2 * left + "px";
- handlerBig.style.top = -2 * top + "px";
- }
- onMounted(() => {
- // 全局事件总线,获取兄弟组件传递过来的索引值
- $bus.on("getIndex", (index) => {
- // 修改当前响应式数据
- currentIndex.value = index.value;
- });
- });
- return {
- currentIndex,
- imgObj,
- handler,
- mask,
- big,
- };
- },
- };
- script>
-
- <style lang="less">
- .spec-preview {
- position: relative;
- width: 400px;
- height: 400px;
- border: 1px solid #ccc;
-
- img {
- width: 100%;
- height: 100%;
- }
-
- .event {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 998;
- }
-
- .mask {
- width: 50%;
- height: 50%;
- background-color: rgba(0, 255, 0, 0.3);
- position: absolute;
- left: 0;
- top: 0;
- display: none;
- }
-
- .big {
- width: 100%;
- height: 100%;
- position: absolute;
- top: -1px;
- left: 100%;
- border: 1px solid #aaa;
- // overflow: hidden;
- z-index: 998;
- display: none;
- background: white;
-
- img {
- width: 200%;
- max-width: 200%;
- height: 200%;
- position: absolute;
- left: 0;
- top: 0;
- }
- }
-
- .event:hover ~ .mask,
- .event:hover ~ .big {
- display: block;
- }
- }
- style>