這篇文章將為大家詳細講解有關vue3如何封裝放大鏡組件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
結尾有完整代碼可直接復制使用
目的：封裝圖片預覽組件，實現鼠標懸停切換效果
落地代碼：
<template>
<div class="goods-image">
<div class="middle">
<img :src="images[currIndex]" alt="">
</div>
<ul class="small">
<li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}">
<img @mouseenter="currIndex=i" :src="img" alt="">
</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'GoodsImage',
props: {
images: {
type: Array,
default: () => []
}
},
setup (props) {
const currIndex = ref(0)
return { currIndex }
}
}
</script>
<style scoped lang="less">
.goods-image {
width: 480px;
height: 400px;
position: relative;
display: flex;
.middle {
width: 400px;
height: 400px;
background: #f5f5f5;
}
.small {
width: 80px;
li {
width: 68px;
height: 68px;
margin-left: 12px;
margin-bottom: 15px;
cursor: pointer;
&:hover,&.active {
border: 2px solid @xtxColor;
}
}
}
}
</style>圖片放大鏡
步驟：
首先準備大圖容器和遮罩容器
然后使用@vueuse/core的useMouseInElement方法獲取基于元素的偏移量
計算出 遮罩容器定位與大容器背景定位 暴露出數據給模板使用
落地代碼：
<template>
<div class="goods-image">
+ // 實現右側大圖布局效果（背景圖放大4倍）
+ <div class="large" :></div>
<div class="middle">
<img :src="images[currIndex]" alt="">
+ // 準備待移動的遮罩容器
+ <div class="layer"></div>
</div>
<ul class="small">
<li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}">
<img @mouseenter="currIndex=i" :src="img" alt="">
</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'GoodsImage',
props: {
images: {
type: Array,
default: () => []
}
},
setup (props) {
const currIndex = ref(0)
return { currIndex }
}
}
</script>
<style scoped lang="less">
.goods-image {
width: 480px;
height: 400px;
position: relative;
display: flex;
+ z-index: 500;
+ // 右側大圖樣式
+ .large {
+ position: absolute;
+ top: 0;
+ left: 412px;
+ width: 400px;
+ height: 400px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
+ background-repeat: no-repeat;
+ background-size: 800px 800px;
+ background-color: #f8f8f8;
+ }
.middle {
width: 400px;
height: 400px;
background: #f5f5f5;
+ position: relative;
+ cursor: move;
+ // 遮罩樣式
+ .layer {
+ width: 200px;
+ height: 200px;
+ background: rgba(0,0,0,.2);
+ left: 0;
+ top: 0;
+ position: absolute;
+ }
}
.small {
width: 80px;
li {
width: 68px;
height: 68px;
margin-left: 12px;
margin-bottom: 15px;
cursor: pointer;
&:hover,&.active {
border: 2px solid @xtxColor;
}
}
}
}
</style>npm i @vueuse/core@5.3.0
目前5.3.0版本相對穩定
vueuse提供的監聽進入指定范圍方法的基本使用
import { useMouseInElement } from '@vueuse/core'
const { elementX, elementY, isOutside } = useMouseInElement(target)方法的參數target表示被監聽的DOM對象；返回值elementX, elementY表示被監聽的DOM的左上角的位置信息left和top；isOutside表示是否在DOM的范圍內，true表示在范圍之外。false表示范圍內。
<div v-if="isShow" class="large" :></div>
<div class="middle" ref="target">
<img :src="images[currIndex]" alt="" />
<div class="layer" v-if="isShow" :></div>
</div>
setup () {
// 被監聽的區域
const target = ref(null)
// 控制遮罩層和預覽圖的顯示和隱藏
const isShow = ref(false)
// 定義遮罩的坐標
const position = reactive({
left: 0,
top: 0
})
// 右側預覽大圖的坐標
const bgPosition = reactive({
backgroundPositionX: 0,
backgroundPositionY: 0
})
return { position, bgPosition, target, isShow }
}const { elementX, elementY, isOutside } = useMouseInElement(target)
// 基于偵聽器偵聽值的變化
watch([elementX, elementY, isOutside], () => {
// 通過標志位控制顯示和隱藏
isShow.value = !isOutside.value
if (isOutside.value) return
// X方向坐標范圍控制
if (elementX.value < 100) {
// 左側
position.left = 0
} else if (elementX.value > 300) {
// 右側
position.left = 200
} else {
// 中間
position.left = elementX.value - 100
}
// Y方向坐標范圍控制
if (elementY.value < 100) {
position.top = 0
} else if (elementY.value > 300) {
position.top = 200
} else {
position.top = elementY.value - 100
}
// 計算預覽大圖的移動的距離
bgPosition.backgroundPositionX = -position.left * 2 + 'px'
bgPosition.backgroundPositionY = -position.top * 2 + 'px'
// 計算遮罩層的位置
position.left = position.left + 'px'
position.top = position.top + 'px'
})<template>
<div class="goods-image">
<div v-if="isShow" class="large" :></div>
<div class="middle" ref="target">
<img :src="images[currIndex]" alt="" />
<div class="layer" v-if="isShow" :></div>
</div>
<ul class="small">
<li v-for="(img, i) in images" :key="img" :class="{ active: i === currIndex }">
<img @mouseenter="currIndex = i" :src="img" alt="" />
</li>
</ul>
</div>
</template>
<script>
import { ref, watch, reactive } from 'vue'
import { useMouseInElement } from '@vueuse/core'
export default {
name: 'GoodsImage',
props: {
images: {
type: Array,
default: () => []
}
},
setup (props) {
const currIndex = ref(0)
const target = ref(null)
const isShow = ref(false)
const position = reactive({
left: 0,
top: 0
})
const bgPosition = reactive({
backgroundPositionX: 0,
backgroundPositionY: 0
})
const { elementX, elementY, isOutside } = useMouseInElement(target)
watch([elementX, elementY, isOutside], () => {
isShow.value = !isOutside.value
if (isOutside.value) return
if (elementX.value <= 100) {
position.left = 0
} else if (elementX.value >= 300) {
position.left = 200
} else {
position.left = elementX.value - 100
}
if (elementY.value <= 100) {
position.top = 0
} else if (elementY.value >= 300) {
position.top = 200
} else {
position.top = elementY.value - 100
}
bgPosition.backgroundPositionX = -position.left * 2 + 'px'
bgPosition.backgroundPositionY = -position.top * 2 + 'px'
position.left += 'px'
position.top += 'px'
})
return { currIndex, target, isShow, position, bgPosition }
}
}
</script>
<style scoped lang="less">
.goods-image {
width: 480px;
height: 400px;
position: relative;
display: flex;
z-index: 500;
.large {
position: absolute;
top: 0;
left: 412px;
width: 400px;
height: 400px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
background-size: 800px 800px;
background-color: #f8f8f8;
}
.middle {
width: 400px;
height: 400px;
background: #f5f5f5;
position: relative;
cursor: move;
.layer {
width: 200px;
height: 200px;
background: rgba(0,0,0,.2);
left: 0;
top: 0;
position: absolute;
}
}
.small {
width: 80px;
li {
width: 68px;
height: 68px;
margin-left: 12px;
margin-bottom: 15px;
cursor: pointer;
&:hover,
&.active {
border: 2px solid @xtxColor;
}
}
}
}
</style>關于“vue3如何封裝放大鏡組件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
