vue 移动元素,调整元素宽高,支持 el-dialog

简介

在 vue 中让元素可移动,可调整宽高。

在线实例:https://yujinpan.github.io/v-window/
查看更多:https://github.com/yujinpan/v-window

使用

安装

npm install --save v-window

全局注册

import Vue from "vue";
import Window from "v-window";

Vue.use(Window);

局部注册

import Window from "v-window";

export default {
   
  directives: {
   
    Window
  }
};

配置项

  • value: 可移动的目标元素的选择器,默认当前元素
  • modifi
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现el-dialog拖拽不能超出指定元素,可以使用Vue.js的指令v-dialog-drag,结合CSS的position属性和JS的计算方法来实现: 1. 在el-dialog中添加一个指令v-dialog-drag,如下所示: ``` <el-dialog v-dialog-drag="{target:'.target-element'}"></el-dialog> ``` 其中,target属性指定了拖拽不能超出的目标元素选择器。 2. 在CSS中设置目标元素的position属性为relative或absolute,如下所示: ``` .target-element { position: relative; } ``` 3. 在Vue.js的自定义指令中,获取目标元素的位置和大小,计算el-dialog的位置,实现拖拽不能超出目标元素的效果,代码如下: ``` Vue.directive('dialogDrag', { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); const targetDom = document.querySelector(binding.value.target); const targetRect = targetDom.getBoundingClientRect(); dialogHeaderEl.style.cursor = 'move'; // 获取el-dialog的位置 const getDialogPosition = (event) => { const dragDomRect = dragDom.getBoundingClientRect(); const targetLeft = targetRect.left + window.pageXOffset; const targetTop = targetRect.top + window.pageYOffset; const maxLeft = targetLeft + targetDom.clientWidth - dragDomRect.width; const maxTop = targetTop + targetDom.clientHeight - dragDomRect.height; let left = dragDomRect.left + event.clientX - startX; let top = dragDomRect.top + event.clientY - startY; left = Math.max(targetLeft, Math.min(left, maxLeft)); top = Math.max(targetTop, Math.min(top, maxTop)); return {left, top}; } let startX = 0; let startY = 0; let dialogLeft = 0; let dialogTop = 0; let dragging = false; // 鼠标按下事件 const handleMousedown = (event) => { startX = event.clientX; startY = event.clientY; dialogLeft = parseFloat(getComputedStyle(dragDom).left); dialogTop = parseFloat(getComputedStyle(dragDom).top); dragging = true; } // 鼠标移动事件 const handleMousemove = (event) => { if (dragging) { const {left, top} = getDialogPosition(event); dragDom.style.left = `${left}px`; dragDom.style.top = `${top}px`; } } // 鼠标释放事件 const handleMouseup = () => { dragging = false; } dialogHeaderEl.addEventListener('mousedown', handleMousedown); document.addEventListener('mousemove', handleMousemove); document.addEventListener('mouseup', handleMouseup); } }); ``` 这样,el-dialog就可以在指定元素内拖拽,不能超出目标元素

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值