Vue3鼠标拖拽生成区域块并选中元素,选中的元素则背景高亮(或者其它逻辑)。
<script setup>
import { ref } from 'vue'
const regionRef = ref(null)
const itemRefs = ref(null)
const enable = ref(false)
const start = ref({
x: 0,
y: 0
})
const regionConfig = ref({
top: '0px',
left: '0px',
width: '0px',
height: '0px'
})
const onMousedown = (e) => {
const { pageX, pageY } = e
start.value.x = pageX
start.value.y = pageY
regionConfig.value.top = pageY + 'px'
regionConfig.value.left = pageX + 'px'
enable.value = true
}
const onMouseup = () => {
enable.value = false
}
const onMousemove = (e) => {
if (!enable.value) return false
const { pageX, pageY } = e
const x = pageX - start.value.x
const y = pageY - start.value.y
regionConfig.value.width = Math.abs(x) + 'px'
regionConfig.value.height = Math.abs(y) + 'px'
if (x < 0) {
regionConfig.value.left = pageX + 'px'
}
if (y < 0) {
regionConfig.value.top = pageY + 'px'
}
const boxRect = regionRef.value.getBoundingClientRect()
itemRefs.value.forEach((item) => {
const rect = item.getBoundingClientRect()
if (boxRect.top <= rect.top && boxRect.bottom >= rect.bottom && boxRect.left <= rect.left && boxRect.right >= rect.right) {
item.style.backgroundColor = 'rgb(10, 228, 10)'
} else {
item.style.backgroundColor = '#cbccce'
}
})
}
</script>
<template>
<main
class="w_h_100 home"
@mousedown="onMousedown"
@mouseup="onMouseup"
@mousemove="onMousemove"
>
<div class="box">
<div
ref="itemRefs"
class="item"
v-for="item in 10"
:key="item"
>{{ item }}</div>
</div>
<div
ref="regionRef"
class="region"
:style="regionConfig"
></div>
</main>
</template>
<style lang="less">
.home {
display: flex;
align-items: center;
justify-content: center;
.box {
width: 200px;
display: flex;
flex-wrap: wrap;
}
.item {
margin-right: 10px;
margin-bottom: 10px;
width: 30px;
height: 30px;
color: #fff;
text-align: center;
line-height: 30px;
background-color: #cbccce;
user-select: none;
}
.region {
position: fixed;
z-index: 10;
border: 1px solid #0094ff;
background-color: rgba(0, 148, 255, 0.1);
}
}
</style>