哪里可以做企业网站,seo免费教程,河南省建设资格注册中心网站,网页设计成品网站前端vue项目中#xff0c;经常会有弹框拖拽的需求#xff0c;下面介绍常用方法#xff1a; 1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可#xff0c;代码如下#xff1a;
el-dialogv-modelshowDiloagwidth500经常会有弹框拖拽的需求下面介绍常用方法 1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可代码如下
el-dialogv-modelshowDiloagwidth500draggable/e--dialog2.如果不使用ele 的组件自己写弹框那么可以自定义指令代码如下(vue3)
drag.js文件
const drag {mounted(el, binding) {el.style.position absolute;const data binding.value || { x: 0, y: 0, zIndex: 99999 };let { x, y, zIndex 99999 } data;el.style.left x px;el.style.top y px;el.style.zIndex zIndex;let isDragging false;let baseMousePosition { x: 0, y: 0 };let dom data.targetRef || document.getElementById(data.targetId) || el;dom.style.cursor move;const onDragStart (e) {if (e.button 0) {isDragging true;baseMousePosition.x e.pageX;baseMousePosition.y e.pageY;window.addEventListener(mousemove, onDraging);}};const onDragEnd (e) {isDragging false;x parseInt(el.style.left);y parseInt(el.style.top);window.removeEventListener(mousemove, onDraging);};const onDraging (e) {if (isDragging) {el.style.left e.pageX - baseMousePosition.x x px;el.style.top e.pageY - baseMousePosition.y y px;}};dom.addEventListener(mousedown, onDragStart);window.addEventListener(mouseup, onDragEnd);},
};const directives {install: function (app) {app.directive(drag, drag)}
}
export default directivesvue文件使用
script setup
import { ref } from vue;const dragRef ref()
const dragOptions ref({x: 100,y: 200,targetRef: dragRef,
})
/scripttemplatediv v-dragdragOptions classdialogdiv classdialog_header refdragRef弹框标题/divdiv classdialog_content弹框内容/div/divtemplate这里的dragOptions就是配置项x和y是弹框的初始位置的left和top值targetRef的值是你希望鼠标在哪个dom元素可以拖拽如果不传就默认在整个弹框范围都可以拖拽。
