Vue鼠标右键画矩形和Ctrl按键多选组件

效果图

效果图

说明

下面会贴出组件代码以及一个Demo，上面的效果图即为Demo的效果，建议直接将两份代码拷贝到自己的开发环境直接运行调试。

组件代码

<template><!-- 鼠标画矩形选择对象 --><div class="objects" ref="objectsRef" @mousedown="handleMouseDown"><!-- 矩形选择框 --><divclass="mask"ref="maskRef"v-show="maskPosition.show":style="'width:' +maskWidth +'left:' +maskLeft +'height:' +maskHeight +'top:' +maskTop"/><!-- 选择对象内容的目标插槽 --><slot name="selcetObject" /></div>
</template><script lang="ts" setup>
import { reactive, toRefs, ref, computed } from "vue";const props = withDefaults(defineProps<{objectClassName: string; // 选择对象的class name，用于定义如何获取对象objectIdName: string; // 选择对象的id name，用于定义如何获取对象的idselectObjectIds?: Array<string>; // 选中的对象IDselectObjects?: Array<HTMLElement>; // 选中的对象useCtrlSelect?: boolean; // 是否支持按住Ctrl多选}>(),{useCtrlSelect: true // 默认支持按住Ctrl多选}
);const objectsRef = ref();
const maskRef = ref();
const emits = defineEmits(["update:selectObjects", "update:selectObjectIds"]);
const state = reactive({maskPosition: {show: false,startX: 0,startY: 0,endX: 0,endY: 0}, // 矩形框位置isPressCtrlKey: false // 是否按下了Ctrl键
});
const { maskPosition, isPressCtrlKey } = toRefs(state);// 若支持按住Ctrl多选，监听Ctrl事件
if (props.useCtrlSelect) {// 释放document.addEventListener("keyup", event => {if (event.keyCode === 17) {isPressCtrlKey.value = false;}});// 按下document.addEventListener("keydown", event => {if (event.keyCode === 17) {isPressCtrlKey.value = true;}});
}/** 鼠标按下 */
const handleMouseDown = event => {// 展示矩形框，通过坐标位置来画出矩形maskPosition.value.show = true;maskPosition.value.startX = event.clientX;maskPosition.value.startY = event.clientY;maskPosition.value.endX = event.clientX;maskPosition.value.endY = event.clientY;// 监听鼠标移动事件和抬起离开事件objectsRef.value.addEventListener("mousemove", handleMouseMove);objectsRef.value.addEventListener("mouseup", handleMouseUp);
};/** 鼠标移动 */
const handleMouseMove = event => {maskPosition.value.endX = event.clientX;maskPosition.value.endY = event.clientY;
};/** 鼠标抬起离开 */
const handleMouseUp = () => {// 移除鼠标监听事件objectsRef.value.removeEventListener("mousemove", handleMouseMove);objectsRef.value.removeEventListener("mouseup", handleMouseUp);maskPosition.value.show = false;handleResetMaskPosition();handleGetSelectObject();
};/** 获取选择的对象 */
const handleGetSelectObject = () => {// 选中对象ID和对象元素let tempSelectObjectIds: Array<string> = [];let tempSelectObjects: Array<HTMLElement> = [];// 如果按下了Ctrl键，之前选择的数据不清空if (isPressCtrlKey.value) {tempSelectObjectIds =props.selectObjectIds === undefined ? [] : props.selectObjectIds;tempSelectObjects =props.selectObjects === undefined ? [] : props.selectObjects;}// 获取鼠标画出的矩形框位置const rectanglePosition = maskRef.value.getClientRects()[0];// 获取所有选择区域的对象; 这里获取的元素的方式定义于父组件的objectClassNameconst selectedObjects = objectsRef.value.querySelectorAll(`.${props.objectClassName}`);// 遍历对象，获取到每个对象的坐标位置，判断该位置是否在上面获取到的鼠标画矩形的框的位置中selectedObjects.forEach(item => {const objectPosition = item.getClientRects()[0];// 这里获取的id的方式定义于父组件的objectIdNameif (compareObjectPosition(objectPosition, rectanglePosition)) {const id = item.getAttribute(props.objectIdName);// 如果按下了Ctrl键if (isPressCtrlKey.value) {// 已被选中的需要被取消选中if (tempSelectObjectIds.includes(id)) {tempSelectObjectIds = tempSelectObjectIds.filter(a => a != id);tempSelectObjects = tempSelectObjects.filter(a => a != item);} else {tempSelectObjectIds.push(id);tempSelectObjects.push(item);}} else {tempSelectObjectIds.push(id);tempSelectObjects.push(item);}}});// 回传到父组件emits("update:selectObjects", tempSelectObjects);emits("update:selectObjectIds", tempSelectObjectIds);
};/*** 判断对象坐标是否在鼠标画出的矩形框坐标位置内* @param objectPosition 对象坐标位置* @param rectanglePosition 鼠标画出的矩形框坐标位置*/
const compareObjectPosition = (objectPosition, rectanglePosition) => {const maxX = Math.max(objectPosition.x + objectPosition.width,rectanglePosition.x + rectanglePosition.width);const maxY = Math.max(objectPosition.y + objectPosition.height,rectanglePosition.y + rectanglePosition.height);const minX = Math.min(objectPosition.x, rectanglePosition.x);const minY = Math.min(objectPosition.y, rectanglePosition.y);return (maxX - minX <= objectPosition.width + rectanglePosition.width &&maxY - minY <= objectPosition.height + rectanglePosition.height);
};/** 重置鼠标位置 */
const handleResetMaskPosition = () => {maskPosition.value.startX = 0;maskPosition.value.startY = 0;maskPosition.value.endX = 0;maskPosition.value.endY = 0;
};/** 通过鼠标位置实时计算矩形框大小 */
const maskWidth = computed(() => {return `${Math.abs(maskPosition.value.endX - maskPosition.value.startX)}px;`;
});
const maskHeight = computed(() => {return `${Math.abs(maskPosition.value.endY - maskPosition.value.startY)}px;`;
});
const maskLeft = computed(() => {return `${Math.min(maskPosition.value.startX, maskPosition.value.endX)}px;`;
});
const maskTop = computed(() => {return `${Math.min(maskPosition.value.startY, maskPosition.value.endY)}px;`;
});
</script><style scoped lang="scss">
.objects {height: 100%;width: 100%;overflow-y: auto;.mask {position: fixed;background: #409eff;opacity: 0.4;z-index: 100;}
}
</style>

Demo

建议直接将上面组件命名为 MouseDrawRectangle

<template><!------------- 鼠标画矩形选择对象组件DEMO，可以直接拷贝到你的页面去运行-----------------------><div class="content"><!-- MouseDrawRectangle说明：objectClassName绑定到下面对象class名称； objectIdName名称对应object_id；useCtrlSelect默认是打开的，用于按住Ctrl键进行多选，以及取消已选择的对象。selectObjectIds会实时从子组件更新过来，监听它的值来控制页面的选择状态即可。另外有参数selectObjects会实时从子组件传回被选中的对象Dom信息--><MouseDrawRectangleobjectClassName="select_object"objectIdName="object_id":useCtrlSelect="true"v-model:selectObjectIds="selectObjectIds"v-model:selectObjects="selectObjects"><!-- 这个是插槽，将业务内容的Dom限制在MouseDrawRectangle组件内，这样可以将后面组件所有的监听事件绑定到组件上而不是整个页面Dom上，鼠标滑动的区域也会限制死在组件内，而不是整个页面的范围 --><template #selcetObject><div class="objects_content"><!-- 每一个选择的目标对象 --><divv-for="item in 50":key="item"class="select_object":object_id="item":class="selectObjectIds.includes(item.toString()) ? 'is_selected' : ''">{{ item }}</div></div></template></MouseDrawRectangle></div>
</template><script lang="ts" setup>
import { reactive, toRefs, watch } from "vue";
import MouseDrawRectangle from "@/components/objectSelect/mouseDrawRectangle.vue";const state = reactive({selectObjectIds: [] as Array<string>, // 选中的对象IDselectObjects: [] as Array<HTMLElement> // 选中的对象DOM
});
const { selectObjectIds, selectObjects } = toRefs(state);watch(() => [selectObjectIds.value, selectObjects.value],() => {console.log("选中的ID=>", selectObjectIds);console.log("选中的Dom=>", selectObjects);}
);
</script><style scoped lang="scss">
.content {// 因为使用flex布局，最下面一行盒子换行只会出现一半的高度，这里最好减去下每个盒子的高度height: calc(100% - 50px);overflow-y: auto;padding: 20px;.objects_content {user-select: none;display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 10px;// 盒子样式> div {width: 200px;height: 100px;background-color: #999;}.is_selected {color: #fff;box-sizing: border-box;border: 3px #317aff solid;border-radius: 5px;}}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/107253.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

42.会话划分问题求解（打标）

42.会话划分问题求解（打标）

思路分析&#xff1a; &#xff08;1&#xff09;为每一次浏览找到他的上一次浏览时间 lag(view_timestamp, 1, 0) over(partition by user_id order by view_timestamp) as last_view_timestamp &#xff08;2&#xff09;为&#xff1e;60s的设置一个初始会话的标签flagif(vi…
阅读更多...
ArcGIS笔记6_绘制中间镂空的面要素、面要素抠洞

ArcGIS笔记6_绘制中间镂空的面要素、面要素抠洞

本文目录 前言Step 1 对海湾大整面和零散的岛屿分别绘制面要素Step 2 利用[擦除]工具从海湾大整面中抠掉零散的岛屿 前言 使用ArcGIS做项目时&#xff0c;很多场景下都需要绘制中间镂空的面要素&#xff0c;比如一个海湾中间有许多零散的岛屿&#xff0c;计算水域面积时就要扣…
阅读更多...
ant design pro v6如何引入第三方js？如腾讯地图等！

ant design pro v6如何引入第三方js？如腾讯地图等！

由于ant pro隐藏.html&#xff0c;需要通过他们约定的方式引入即可。 1.配置config文件 /config/config.tsheadScripts: [// 解决首次加载时白屏的问题{ src: /scripts/loading.js, async: true },{ src: "https://map.qq.com/api/gljs?v1.exp&keyOB4BZ-D4W3U-B7VV…
阅读更多...
企业如何凭借软文投放实现营销目标？

企业如何凭借软文投放实现营销目标？

数字时代下&#xff0c;软文投放成为许多企业营销的主要方式&#xff0c;因为软文投放成本低且效果持续性强&#xff0c;最近也有不少企业来找媒介盒子进行软文投放&#xff0c;接下来媒介盒子就来给大家分享下&#xff0c;企业在软文投放中需要掌握哪些技巧&#xff0c;才能实…
阅读更多...
加速企业云计算部署：应对新时代的挑战

加速企业云计算部署：应对新时代的挑战

随着科技的飞速发展&#xff0c;企业面临着诸多挑战。在这个高度互联的世界中&#xff0c;企业的成功与否常常取决于其能否快速、有效地响应市场的变化。云计算作为一种新兴的技术趋势&#xff0c;为企业提供了实现这一目标的可能。通过加速企业云计算部署&#xff0c;企业可以…
阅读更多...
【C/C++】宏定义中的#和##

【C/C++】宏定义中的#和##

C和C中的宏&#xff08;Macro&#xff09;属于编译器预处理的范畴。 单井号# 运算符 单井号#&#xff08;字符串化运算符&#xff09;用于将 宏参数变量名 转换为 字符串&#xff08;Stringfication&#xff09;。 下面是一个示例&#xff1a; #include <stdio.h>#de…
阅读更多...
MTK6877/MT6877天玑900安卓5G核心板_安卓开发板主板定制开发

MTK6877/MT6877天玑900安卓5G核心板_安卓开发板主板定制开发

2021年5月13日&#xff0c;MediaTek 宣布发布旗下的天玑900系列芯片&#xff0c;又名MT6877。天玑900基于6nm先进工艺制造&#xff0c;搭载硬件级4K HDR视频录制引擎&#xff0c;支持1.08亿像素摄像头、5G双全网通和Wi-Fi 6连接、旗舰级存储规格和120Hz的FHD超高清分辨率显示&a…
阅读更多...
第五十六章 学习常用技能 - 执行 SQL 查询

第五十六章 学习常用技能 - 执行 SQL 查询

文章目录 第五十六章 学习常用技能 - 执行 SQL 查询执行 SQL 查询检查对象属性 第五十六章 学习常用技能 - 执行 SQL 查询 执行 SQL 查询 要运行 SQL 查询&#xff0c;请在管理门户中执行以下操作&#xff1a; 选择系统资源管理器 > SQL。如果需要&#xff0c;请选择标题…
阅读更多...
数据在内存中的存储（2）

数据在内存中的存储（2）

文章目录 3. 浮点型在内存中的存储3.1 一个例子3.2 浮点数存储规则 3. 浮点型在内存中的存储 常见的浮点数&#xff1a; 3.14159 1E10 ------ 1.0 * 10^10 浮点数家族包括&#xff1a; float、double、long double 类型 浮点数表示的范围&#xff1a;float.h中定义 3.1 一个例…
阅读更多...
mask-R-CNN

mask-R-CNN

前言 代码 论文 # Mask-rcnn 算法在 torch vision 中有直接实现&#xff0c;可以直接引用使用在自己的工作中。 import torchvision model torchvision.models.detection.maskrcnn_resnet50_fpn(weightsMaskRCNN_ResNet50_FPN_Weights.DEFAULT)Mask R-CNN&#xff08;Mask R…
阅读更多...
Linux开发-Ubuntu软件源工具

Linux开发-Ubuntu软件源工具

开发&验证环境&#xff1a; 操作系统&#xff1a;ubuntu 20.04 软件源&#xff1a;http://archive.ubuntu.com/ubuntu 开发工具 sudo apt install vim sudo apt install git sudo apt install git-lfs# gnu工具链 sudo apt install gcc sudo apt install g sudo apt inst…
阅读更多...
yolov8如何进行训练验证推理

yolov8如何进行训练验证推理

1、新建脚本main.py&#xff0c;也可以建一个yaml文件&#xff08;避免改到default.yaml&#xff09;&#xff0c;这个yaml文件是在训练时用到 batchsize什么的都可以在yaml文件改&#xff0c;这俩东西不用填 2、两种训练的方法&#xff0c;用的时候可以注释掉其他 from u…
阅读更多...
【Python学习笔记】函数

【Python学习笔记】函数

1. 函数组成 Python中&#xff0c;我们是这样定义函数的&#xff1a; def function(para1, para2):print("func start")print(para1)print(para2)print("func end")print("让技术总监面试 求职者")return "func return"def 是关键字…
阅读更多...
AI Web3 盛会「EDGE」在港闭幕，融云国际影响力持续提升

AI Web3 盛会「EDGE」在港闭幕，融云国际影响力持续提升

&#x1f446;点击报名「爱嗨游」线上发布会 9 月 25 日至 27 日&#xff0c;全球规模最大的 AI & Web3 投资盛会——EDGE 峰会在中国香港举办&#xff0c;融云作为战略合作伙伴与来自世界各地的企业家、投资人、学者和热门项目方一同完成了这一盛会。关注【融云全球互联网…
阅读更多...
vmware ubuntu 虚拟机 网卡图片消失处理办法

vmware ubuntu 虚拟机 网卡图片消失处理办法

如图&#xff0c;这个图标消失处理办法&#xff1a; 输入如下指令&#xff1a;sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service network-manager start
阅读更多...
【06】基础知识：typescript中的泛型

【06】基础知识：typescript中的泛型

一、泛型的定义 在软件开发中&#xff0c;我们不仅要创建一致的定义良好的API&#xff0c;同时也要考虑可重用性。 组件不仅能支持当前数据类型&#xff0c;同时也能支持未来的数据类型&#xff0c;这在创建大型系统时提供了十分灵活的功能。 在像 C# 和 Java 这样的语言中&…
阅读更多...
AM@隐函数@隐函数求导@幂指函数求导@参数式函数求导

AM@隐函数@隐函数求导@幂指函数求导@参数式函数求导

文章目录 abstract显函数隐函数隐函数显化 隐函数求导对数求导法幂指函数求导乘法链函数及其分式函数求导例子例例例例 参数方程确定的函数及其导数引言参数方程确定的函数例 参数方程确定的函数的导数参方函数的二阶导数例子例例 极坐标曲线某点的导数 abstract 显函数和隐函…
阅读更多...
在进行自动化测试，遇到验证码的问题,怎么办？

在进行自动化测试，遇到验证码的问题,怎么办？

1.找开发去掉验证码或者使用万能验证码 2.使用OCR自动识别 使用OCR自动化识别&#xff0c;一般识别率不是太高&#xff0c;处理一般简单验证码还是没问题 这里使用的是Tesseract-OCR,下载地址&#xff1a;https://github.com/A9T9/Free-Ocr-Windows-Desktop/releases 怎么使…
阅读更多...
论自动化测试中的xpath | 多语言测试最新案例

论自动化测试中的xpath | 多语言测试最新案例

XPath&#xff08;XML Path Language&#xff09;是一门在XML文档中查找信息的语言。XPath是XML处理中非常重要的组成部分&#xff0c;能大大简化文档的解析和处理。它与XSLT、XPointer等标准一起被广泛应用于XML的解析处理。 一般情况下&#xff0c;xpath主要应用在以下几个方…
阅读更多...
VR、AR、MR、XR到底都是什么？有什么区别

VR、AR、MR、XR到底都是什么？有什么区别

目录 VRARMRXRAR、VR、MR、XR的区别 VR 英&#xff1a;Virtual Reality 中文翻译&#xff1a;虚拟现实 又称计算机模拟现实。是指由计算机生成3D内容&#xff0c;为用户提供视觉、听觉等感官来模拟现实&#xff0c;具有很强的“临场感”和“沉浸感”。我们可以使用耳机、控制器…
阅读更多...
最新文章

Copyright @ 2022~2023