vue3实现鼠标左键拖拽画矩形框框选功能

vue3 + elementuiPlus 实现鼠标左键拖拽画矩形框框选列表功能，仿照桌面框选功能
效果如图：

vue3鼠标框选

代码：

<template><div class="box-img"  @mousedown="handleMouseDown"><div class="mask" v-show="positionList.is_show_mask" :style="'width:' + mask_width + 'left:' + mask_left + 'height:' + mask_height + 'top:' + mask_top"></div><el-checkbox-group v-model="selectedState" class="checkboxGroup"><el-checkbox v-for="(item, index)  in tableData" :key="index"  :label="item.id" :class="selectedState.includes(item.id) ? 'checkbox aa-active' : 'checkbox'" @change="checkItem($event,item)"><img style="width: 100% ;height: 100%" :src="handleAssetsImages(item.img)" alt=""><span class="num" v-show="selectedState.includes(item.id)">{{(selectedState.indexOf(item.id) + 1)}}</span></el-checkbox></el-checkbox-group></div>
</template><script lang="ts" setup>import {ref,reactive,onMounted,computed} from 'vue'// 假设这个是上边小div的列表，后台数据请求回来的吗，假设已经有数据了，里面有唯一标识符idconst tableData = reactive([{id: 'abcd1',  data:'cccc', img: '1.png'},{id: 'abcd2',  data:'dddd', img: '1.png'},{id: 'abcd3',  data:'eeee', img: '1.png'},{id: 'abcd4',  data:'ffff', img: '1.png'},{id: 'abcd5',  data:'gggg', img: '1.png'},{id: 'abcd6',  data:'hhhh', img: '1.png'},{id: 'abcd7',  data:'iiii', img: '1.png'},{id: 'abcd8',  data:'jjjj', img: '1.png'},{id: 'abcd9',  data:'kkkk', img: '1.png'},{id: 'abcd10', data:'llll', img: '1.png'}])const selectedState = ref([]);// 上方div图片是否被多选中，如果多选了就把id放到这个列表里面，当然可以不用，直接在相应的列表对象加一个参数isSelected也行const positionList = reactive({is_show_mask: false,box_screen_left: 0,box_screen_top: 0,start_x: 0,start_y: 0,end_x: 0,end_y: 0})//分别计算遮罩层的位置，大小const  mask_width = computed(()=> {return `${Math.abs(positionList.end_x - positionList.start_x)}px;`;})const  mask_height = computed(()=> {return `${Math.abs(positionList.end_y - positionList.start_y)}px;`;})const mask_left = computed(() =>{return `${Math.min(positionList.start_x, positionList.end_x) - positionList.box_screen_left}px;`;})const mask_top = computed(()=> {return `${Math.min(positionList.start_y, positionList.end_y) - positionList.box_screen_top}px;`;})//循环动态加载图片const handleAssetsImages=(name)=>{return new URL(`/src/assets/img/${name}`, import.meta.url).href;}//单击多选框选中const checkItem = (val,item)=>{console.log(val,item);let str = item.id ;let i = selectedState.value.indexOf(str)  // 判断选中列表中是否包含这个点击的divif (i < 0) {selectedState.value.push(str) ;  // 如果不包含就加进去} else {selectedState.value.splice(i, 1);  // 如果包含就删}}//鼠标按下事件const  handleMouseDown = (event)=> {positionList.is_show_mask = true;positionList.start_x = event.clientX;positionList.start_y = event.clientY;positionList.end_x = event.clientX;positionList.end_y = event.clientY;document.body.addEventListener("mousemove", handleMouseMove); //监听鼠标移动事件document.body.addEventListener("mouseup", handleMouseUp); //监听鼠标抬起事件}function  handleMouseMove(event) {positionList.end_x = event.clientX;positionList.end_y = event.clientY;}function handleMouseUp() {document.body.removeEventListener("mousemove", handleMouseMove);document.body.removeEventListener("mouseup", handleMouseUp);positionList.is_show_mask = false;handleDomSelect();resSetXY();}function handleDomSelect() {const dom_mask = window.document.querySelector(".mask");//getClientRects()每一个盒子的边界矩形的矩形集合const rect_select = dom_mask.getClientRects()[0];console.log(rect_select);const add_list = [];const del_list = [];document.querySelectorAll(".el-checkbox-group .el-checkbox").forEach((node, index) => {const rects = node.getClientRects()[0];if (collide(rects, rect_select) === true) {if (selectedState.value.includes(tableData[index].id)) {del_list.push(tableData[index].id);} else {add_list.push(tableData[index].id);}}});selectedState.value = selectedState.value.concat(add_list).filter((item) => !del_list.includes(item));}//比较checkbox盒子边界和遮罩层边界最大最小值function  collide(rect1, rect2) {const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);const minX = Math.min(rect1.x, rect2.x);const minY = Math.min(rect1.y, rect2.y);return maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height;}//清除function  resSetXY() {positionList.start_x = 0;positionList.start_y = 0;positionList.end_x = 0;positionList.end_y = 0;}</script>
<style lang="less">.box-img{display: flex;align-items: center;justify-content: space-around;position: relative;height: 100%;width: 100%;.mask {position: absolute;background: #409eff;opacity: 0.4;z-index: 100;}}.checkboxGroup{display: flex;align-items: center;flex-wrap: wrap;.el-checkbox{margin:10px;}.el-checkbox__input {white-space: nowrap;cursor: pointer;outline: 0;display: inline-flex;position: absolute;right: 5px;top: 5px;}.el-checkbox__label{padding:0;width: 100%;height: 100%;}.el-checkbox__input .el-checkbox__inner:after{border-color: #00ffff;}.el-checkbox__input.is-checked .el-checkbox__inner{border: 1px solid #00ffff;}.el-checkbox__inner{border: 1px solid #fff;}}.checkbox{border: 1px solid #999;width: 100px;height: 100px;display: flex;align-items: center;justify-content: space-around;position: relative;}.checkbox-active{border: 1px solid #00ffff;}.num{position: absolute;right: 25px;top: 5px;color: #00ffff;}
</style>

vue3实现鼠标左键拖拽画矩形框框选功能相关推荐

vue2 实现鼠标左键拖拽实现框选功能
一.实现如图所示功能二.鼠标mousedown事件和click事件重复,不设置click事件可以达到相同效果 // 代码如下 <template><el-dialogtitle=& ...
第一次OpenCV小作业-使用鼠标左键画圆画矩形
2020年9月28日 OpenCV中GUI的特性作业: 在白色(255, 255, 255)的背景中,利用滑动条选择颜色(RGB!),用鼠标左键画圆,右键画矩形. 分析: 要在白色背景中,利用滑动条选 ...
C/C++实现水果忍者(四) 实现按鼠标左键划过水果消失的功能
文章目录实现水果被划掉就消失的功能,只需要添加显示与否的flag,判断鼠标的坐标是否碰到水果就可以了.感觉代码像面条一样拉长中- #include <easyx.h> #include ...
DOS窗口（控制台程序）禁用鼠标左键选择（暂停程序的功能）
一.界面设置 DOS窗口右击标题栏,选择属性,出现下图所示属性界面取消"快速编辑模式"勾选,点击"确定"按钮,就大功告成二.代码设置作为程序猿的我们,怎么 ...
检测单击鼠标左键并拖动的消息_计算机视觉OpenCV学习笔记（四）：关于鼠标的相关事件函数...
(7)把鼠标当画笔本篇目标: 学会使用OpenCV中的鼠标处理的相关事件,事件回调函数怎么去定义,参数有哪些,以及如何注册鼠标监听事件. 7.1 .1 回调函数的定义: 1 def name(eve ...
Unity鼠标控制摄像机拖拽、旋转、缩放（模拟编辑器摄像机功能）
网上有不少类似内容了,不过有些不全面,甚至有有残缺,少了上下文,导致复制代码以后报错,笔者很讨厌这种太监代码!! 话说真传一句话,假传万卷书,代码全文如下:复制到自己脚本中,挂到摄像机上即可运行 us ...
python鼠标拖拽功能_selenium鼠标移动、拖拽、双击、长按等操作
selenium鼠标操作靠的是ActionChains(行为链)类,前面的文章我们已经介绍过,详情可以看ActionChains类,selenium的鼠标操作就不一一举例了,本节把鼠标移动.拖拽.双击 ...
Unity鼠标拖动物体、按下鼠标左键旋转观察物体、鼠标滚轮缩放视野
如题目所示,本文实现这三个效果.所有代码都在pc端成功运行,移植到手机端改变相应的判断条件即可,核心算法没有问题. 一. 鼠标拖拽移动物体效果演示源代码 public class mousedra ...
Unity3D鼠标＆Touch拖拽控制节点绕任意轴旋转的实现
这个拖拽最明显的一个优点就是有阻尼的效果阻尼(damping)是指摇荡系统或振动系统受到阻滞使能量随时间而耗散的物理现象 using UnityEngine; using System.Collec ...

vue3实现鼠标左键拖拽画矩形框框选功能

vue3实现鼠标左键拖拽画矩形框框选功能相关推荐

最新文章

热门文章