const drag = {
// 元素已经存在
mounted: function (el: HTMLElement, binding: any) {
console.log('el', el);
const dragDom = el;
dragDom.style.cursor = 'e-resize';
dragDom.onmousedown = (e: { clientX: number }) => {
// 鼠标按下,计算当前元素距离可视区的距离,也就是距离屏幕最左边的距离
console.log('e.clientX', e.clientX);
const disX = e.clientX;
const initialWidth = dragDom.clientWidth;
const minW = 10;
const maxW = 600;
var nw;
document.onmousemove = function (e) {
// 通过事件委托,计算移动的距离,随着鼠标不断移动, 鼠标的move 事件传回的 e.clientX 不断增大,于是,点击的初始位置减去 不断移动的距离,就等于,已经移动的距离
const distance = e.clientX - disX;
// 改变当前元素宽度,不可超过最小最大值
nw = initialWidth + distance;
nw = nw < minW ? minW : nw;
nw = nw > maxW ? maxW : nw;
dragDom.style.width = `${nw}px`;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
};
export default drag;
vue 自定义指令动态改变元素
最新推荐文章于 2023-11-27 09:45:00 发布