vue实现dom元素拉伸

一、实现效果

封装了三个methods方法，传入对应节点即可实现对应元素节点的拉伸收缩。

二、代码

1. 函数封装

/***
* 让指定的dom元素支持沿x轴的拉伸收缩
* oBox为指定的dom节点
* e为鼠标按键默认传入的对象
*/moveX(oBox, e) {let x = e.clientX;let oBoxW = oBox.offsetWidth;document.onmousemove = e => (oBox.style.width = oBoxW + e.clientX - x + 'px')document.onmouseup = () => [document.onmousemove, document.onmouseup] = [null, null]e.preventDefault && e.preventDefault()},
moveY(oBox, e) {if (e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('lineBlock'))|| e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('blockItem'))) {return}let y = e.clientY;let oBoxH = oBox.offsetHeight;document.onmousemove = e => oBox.style.height = oBoxH + e.clientY - y + 'px'document.onmouseup = () => [document.onmousemove, document.onmouseup] = [null, null]e.preventDefault && e.preventDefault()},
moveXY(oBox, e) {let x = e.clientX;let y = e.clientY;let oBoxH = oBox.offsetHeight;let oBoxW = oBox.offsetWidth;document.onmousemove = e => {let xx = e.clientXlet yy = e.clientYoBox.style.width = oBoxW + xx - x + 'px'oBox.style.height = oBoxH + yy - y + 'px'return false;}document.onmouseup = () => [document.onmousemove, document.onmouseup] = [null, null]e.preventDefault && e.preventDefault()},

2. 函数调用

定义了一个包含所有要添加横向拉伸事件的数组，遍历这个数组将这些节点的onmousedown事件设定为moveX函数。

let dragX = [];
dragX.push(...document.getElementsByClassName('blockItem'), ...document.getElementsByClassName('lineBlock'));dragX.map(v => (v.onmousedown事件设定为 = this.moveX.bind({}, v)));

3.dom节点

设定一个blockItem或lineBlock的div就尝试拖拽了。

三、坑点介绍

1. 将需要拖拽的元素传入而不是使用e.target获取

一开始觉得一个参数就能搞定，但实际开发中发现e.target指向的不一定是这个元素本身，也有可能是它的某个子元素，这样就变成了对其子元素的拉伸实现。

2.父级元素支持拉伸导致给子元素添加的拉伸功能失效

在给父元素添加拉伸事件时判断是否当前鼠标按下对应元素是需要支持支持拉伸事件的子元素。（示例代码如下）

if (e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('lineBlock'))
|| e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('blockItem'))) {return
}

聪明的小伙伴应该发现了，以上代码虽然是在vue项目中实现的，但实际用到的语法主要还是原生js。也就是说，要想在原生js中实现呢元素拉伸功能根据以上思路也是非常方便。

END

vue实现dom元素拉伸相关推荐

Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法直接给相应的元素加id,然后再使用document.getElementById("id");获取使用ref,给相应的元素加 ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
八.vue获取dom元素
vue获取dom元素方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二:使用ref,给相应的元 ...
Vue笔记四：Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相 ...
Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
vue中dom元素和组件的获取
Vue中获取DOM元素 <div id="app"><input type="button" value="获取元素" @ ...
vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue ...

vue实现dom元素拉伸

一、实现效果

二、代码

1. 函数封装

2. 函数调用

3.dom节点

三、坑点介绍

1. 将需要拖拽的元素传入而不是使用e.target获取

2.父级元素支持拉伸导致给子元素添加的拉伸功能失效

END

vue实现dom元素拉伸相关推荐

最新文章

热门文章