Directive鼠标拉选框，视频(监控)鼠标拖动聚焦

效果图

国际惯例一楼放图，满足需求往下看。

dom绑定鼠标事件

<template><div class="video-box" v-boxSelect><video ref="VIDEO" class="w-1/1 h-1/1" controls autoplay :src="url"> </video></div>
</template>
<style lang="less" scoped>.video-box {position: relative;overflow: hidden;width: 100%;height: 100%;}
</style>

初始化挂载鼠标按下事件

const boxSelectDirective: Directive = {mounted,unmounted,
};
const mounted = (el: Element, binding: DirectiveBinding<any>) => {on(el, 'mousedown', down);
};
function down(this: HTMLElement, e: MouseEvent) {domX = this.getBoundingClientRect().x;domY = this.getBoundingClientRect().y;startX = e.clientX - domX;startY = e.clientY - domY;divDom = document.createElement('div');divDom.className = 'l_screenshot';divDom.style.top = startY + 'px';divDom.style.left = startX + 'px';this.appendChild(divDom);
}

创建dom元素，并且插入到当前dom的子节点中。插入节点设置属性

 .l_screenshot {width: 1px;height: 1px;border: 1px solid red;position: absolute;z-index: 99;}

按下鼠标事件里挂载鼠标移动以及鼠标抬起事件。注意这里鼠标按下事件在当前dom下监听，但是鼠标抬起要在整个document中监听。

 on(document, 'mouseup', mouseup.bind(this));on(this, 'mousemove', throttle(mousemove.bind(this), 30));

鼠标移动

function mousemove(this: HTMLElement, e: MouseEvent) {e.preventDefault();if (divDom) {const moveX = e.clientX - domX! - startX!;const moveY = e.clientY - domY! - startY!;if (moveX > 0) {divDom.style.width = moveX + 'px';divDom.style.left = startX + 'px';divDom.style.right = '';} else {divDom.style.width = -moveX + 'px';divDom.style.right = this.getBoundingClientRect().width - startX! + 'px';divDom.style.left = '';}if (moveY > 0) {divDom.style.height = moveY + 'px';divDom.style.top = startY + 'px';divDom.style.bottom = '';} else {divDom.style.height = -moveY + 'px';divDom.style.top = '';divDom.style.bottom = this.getBoundingClientRect().height - startY! + 'px';}}
}

鼠标移动时计算当前鼠标位置与初始位置的距离，x为正时width为正且设置dom的style属性为left。当x为负数时，width取正直并且dom的style属性left设置为空切设置right属性。

鼠标抬起

function mouseup(this: HTMLElement) {if (divDom) {off(this, 'mousemove', mousemove);off(document, 'mouseup', mouseup);fn &&fn({key,startX,startY,});destroy();}
}
function destroy() {document.querySelectorAll('.l_screenshot').forEach((i) => i.remove());divDom = null;startX = null;startY = null;domX = null;domY = null;
}

整个事件结束，清除副作用。

完整代码

/*** Global boxSelection directive* Used for fine-grained control of component permissions* @Example v-boxSelection*/
import { on, off } from '/@/utils/domUtils';
import { throttle } from '/@/utils';
import type { App, Directive, DirectiveBinding } from 'vue';
let divDom: HTMLElement | null,startX: number | null,startY: number | null,domX: number | null,domY: number | null,fn: Function | null,key: number | string | null;
function down(this: HTMLElement, e: MouseEvent) {domX = this.getBoundingClientRect().x;domY = this.getBoundingClientRect().y;startX = e.clientX - domX;startY = e.clientY - domY;divDom = document.createElement('div');divDom.className = 'l_screenshot';divDom.style.top = startY + 'px';divDom.style.left = startX + 'px';this.appendChild(divDom);on(document, 'mouseup', mouseup.bind(this));on(this, 'mousemove', throttle(mousemove.bind(this), 30));
}
function mousemove(this: HTMLElement, e: MouseEvent) {e.preventDefault();if (divDom) {const moveX = e.clientX - domX! - startX!;const moveY = e.clientY - domY! - startY!;if (moveX > 0) {divDom.style.width = moveX + 'px';divDom.style.left = startX + 'px';divDom.style.right = '';} else {divDom.style.width = -moveX + 'px';divDom.style.right = this.getBoundingClientRect().width - startX! + 'px';divDom.style.left = '';}if (moveY > 0) {divDom.style.height = moveY + 'px';divDom.style.top = startY + 'px';divDom.style.bottom = '';} else {divDom.style.height = -moveY + 'px';divDom.style.top = '';divDom.style.bottom = this.getBoundingClientRect().height - startY! + 'px';}}
}
function mouseup(this: HTMLElement) {if (divDom) {off(this, 'mousemove', mousemove);off(document, 'mouseup', mouseup);fn &&fn({key,startX,startY,});destroy();}
}
const mounted = (el: Element, binding: DirectiveBinding<any>) => {fn = binding.value[1];key = binding.value[0];on(el, 'mousedown', down);
};
const unmounted = (el: Element) => {off(el, 'mousedown', down);fn = null;key = null;
};
function destroy() {document.querySelectorAll('.l_screenshot').forEach((i) => i.remove());divDom = null;startX = null;startY = null;domX = null;domY = null;
}
const boxSelectDirective: Directive = {mounted,unmounted,
};export function setupBoxSelectDirective(app: App) {app.directive('boxSelect', boxSelectDirective);
}export default boxSelectDirective;

调用

 <div class="video-box" v-boxSelect="['vedioId', completed]"><video ref="VIDEO" class="w-1/1 h-1/1" controls autoplay :src="url"> </video></div><script>function completed(obj) {console.log(obj);}</script>

Directive鼠标拉选框，视频(监控)鼠标拖动聚焦相关推荐

Element UI中el-calendar日历的使用及样式修改（年月可下拉选框选择）
项目场景: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当天日期,用户可以自由点选日期,被选中后日期以紫色显示,鼠标在日历上移动时,日期显示出橙色.有数据的日期显示出灰色. 实现思路:删 ...
Ajax异步配合数据字典完成下拉选框
Ajax异步配合数据字典完成下拉选框在一个web项目中,往往有许多下拉选框,其中下拉选框必须含有特定的内容,而如果在jsp或者html页面中写死的话就很难修改,也不能动态获取到更新的数据,所以要使用 ...
easyExcel导出某列是固定下拉选框的excel模板
easyexcel导出固定下拉选框的模板,项目中遇到的,记录一下. 1.示例如图,第四列的值是下拉选框,是服务器端根据真实数据动态生成的. 2.实现方案 2.1 依赖 <dependency& ...
html 表格，列表，表单，select和下拉选框，textarea多行文本域，label关联控件，表单，浮动框架，结构化标签
1. 表格表格的语法 (1) table标签: 表示表格的开始和结束.表格的所有内容都需要写在这一对标签里 (2) tr标签: 表示表格中的一行 table row (3) td标签:要写在tr中, ...
(vue)提示Tooltip/el-popover在下拉选框option中用法及样式修改
(vue)提示Tooltip/el-popover在下拉选框option中用法及样式修改 iview效果 Eleement-ui效果代码 <Optionv-for="(item, i ...
好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱
下拉选框如需样例和具体效果,请点击下面的连接. 好用的下拉选框(单选,多选,全选,清空和反选,及个种样式) 附件一:layui应用formselect layui.config({base: './ ...
Element UI中el-calendar日历的年月快捷选择（可下拉选框选择）
需求: 以日历形式展现当前页面.其中,年月可进行下拉选择,默认选中当月,用户可以自由点选日期实现思路:右上角年月元素隐藏掉,写一个下拉选框,通过css定位到正确位置,通过vue计算属性进行数据绑定 ...
winform中TreeView控件复选框联动时鼠标点击过快导致的显示不正确的问题
今天我在试着做一个C#树形视图(TreeView)控件,要求在每个节点前面添加一个可用于打勾的复选框,并要求复选框有上下级联动的效果.现在在网上能查到挺多满足这类功能的代码,原本我也以为这是一件挺简单 ...
C# - 解决TreeView控件复选框联动时鼠标点击过快导致的显示不正确的问题
2019独角兽企业重金招聘Python工程师标准>>> 今天我在试着做一个C#树形视图(TreeView)控件,要求在每个节点前面添加一个可用于打勾的复选框,并要求复选框有上下级联动 ...

Directive鼠标拉选框，视频(监控)鼠标拖动聚焦

效果图

dom绑定鼠标事件

Directive鼠标拉选框，视频(监控)鼠标拖动聚焦相关推荐

最新文章

热门文章