vue3 elementplus Dialog 拖拽

2026-09-07

使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能

element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框(el-dialog). 拖拽演示 https://www.zhihu.com/zvideo/1380450791975731200 vue3 的自定义指令 directive 为啥选择自定义指令的方式来实现呢?一个是可以方便的获得 dom 便于操作,另一个是方便使用和封装. 自定义指令有两种注册方

Vue. 之 Element dialog 拖拽

Vue. 之 Element dialog 拖拽默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl

element-ui dialog组件添加可拖拽位置可拖拽宽高

edge浏览器下作的gifhttp://www.lanourteam.com/%E6... 有几个点需要注意一下每个弹窗都要有唯一dom可操作指令可以做到拖拽时要添加可拖拽区块 header 由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题实现拖拽宽高时获取边缘问题 div定位设置模拟边缘 <template> <el-dialog v-dialogDrag ref="dialog__wrapper">

EasyUI， Dialog 在框架页（ifrmae）的Top页面弹出时，拖拽Dialog边缘（以改变窗口大小），UI界面被卡死的解决办法

将Dialog的modal属性设置为true,可以解决卡死的问题(但会给用户使用体验带来影响) var par = { title: This.title, width: This.width, height: This.height, cache: This.cache, modal: This.modal, resizable: This.resizable, maximizable: This.maximizable, onResize: This.onResize, modal: tru

可拖拽dialog

指令的封装转自https://blog.csdn.net/sinat_21902709/article/details/86545444 可拖拽dialog应用于很多弹出框,所以需要作用于全局在插件文件夹中创建一个文件dialogDrag存放公共的指令 import Vue from "vue"; // v-dialogDrag: 弹窗拖拽属性 Vue.directive("dialogDrag", { bind(el, binding, vnode, oldVn

使dialog可拖拽指令

在项目开发过程中,需要支持dialog弹窗可拖拽,则需要对dialog添加指令.具体操作说明如下: (1)在用于存放指令的文件夹内,新建拖拽指令文件夹,例如命名为:el-dragDialog,如下所示: el-dragDialog/index.js文件代码,如下示: import drag from './drag' const install = function(Vue) { Vue.directive('el-drag-dialog', drag) } if (window.Vue) {

使用TypeScript给Vue 3.0写一个指令实现组件拖拽

最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考了一下几大Vue的ui组件库.发现element iview antv.好像都没这个功能.为啥运维需要这个功能?? 但是没办法,只能整一个就是了. 做之前本来想直接做到dialog这个组件中.但是又担心后面其他的组件会用到.于是决定把拖拽功能做到指令中. 整个功能点如图.鼠标在拖拽区域拖动,整个对话

wpf图片查看器，支持鼠标滚动缩放拖拽

最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class="PictureViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/wi

Javascript 事件对象进阶（二）拖拽的应用 - 登录框的拖拽

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} body{ height:2000px;} #login{ float:right; cursor:pointer;} .ui-dialog

纯JS实现可拖拽表单

转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时

js实现登陆页面的拖拽功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } .dialog{ width: 380px;

C# 图片盖章功能实现，支持拖拽-旋转-放缩-保存

实现图片盖章功能,在图片上点击,增加“图章”小图片,可以拖拽“图章”到任意位置,也可以点击图章右下角园框,令图片跟着鼠标旋转和放缩. 操作方法:1.点击增加“图章”2.选中移动图标3.点中右下角放缩旋转图章. 实现代码如下: 1. 窗口Xaml代码 <Window x:Class="Lenovo.YogaPaster.ImageEditWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/present

js 拖拽实现

代码参考 <!DOCTYPE html> <html lang="en"> <title>拖拽</title> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dog { width: 150px; height: 150px; background: red; position:

【UWP】拖拽列表项的排序功能实现

在一些允许用户自定义栏目顺序的app(如:凤凰新闻.网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排.这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台代码),只有三步. ①把冰箱门打开首先,我们需要让冰箱的大门敞开,也就是允许我们进行拖拽的相关操作.以ListView为例,注意下面几个属性. <StackPanel> <ListView x:Name="list" AllowDrop="True"

JavaScript：鼠标拖拽效果

(之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q

为Bootstrap模态对话框添加拖拽移动功能

请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="bootstrap.min.css" media="screen" rel="stylesheet&qu

利用jQuery-UI和jsPlumb实现拖拽连接模型

简介之前公司需要做一个自定义数据搜索模型的功能,大体是这样的:左边显示的每一个模型对应于数据库中的一个表,把左边的模型拉入右边的容器内,会显示这个模型(也就是表)下的列信息,然后通过连线确定各独立的模型之间的关系(对应于数据库中的多表链接查询),然后保存数据到后台执行.由于保存模型就是对容器中的模型的一个解析,这里就不做展示了,这个demo主要处理模型的展示以及如何链接. 话不多说,先上图: 需要用到的东西这个功能主要用到的是jQuery UI的拖拽功能以及jsPlumb连线插件. jsP

一步一步实现JS拖拽插件

js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup.所以拖拽的基本思路就是: 1.用鼠标点击被拖拽的元素触发onmousedown (1)设置当前元素的可拖拽为true,表示可以拖拽 (2)记录当前鼠标的坐标x,y

基于jquery-ui及bootstrap的可拖拽模态框

可直接使用代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>model</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <sc

Bootstrap 可视化布局--拖拽后弹窗进行编辑

Bootstrap 可视化布局--拖拽后弹窗进行编辑最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquery-ui中的 draggable各种坑不断,哎,一言难尽,最怕这种不是自己写的,只能不断踩坑,踩着踩着就好了最终目的效果图原始效果是没有之后的弹窗,需要点击才会有思路思路1: 将点击的代码直接放到拖拽结束时使用即可思路2: 找到被拖拽的对象,对其进行修改即可思路3: 找到点击弹窗的按钮

vue3 elementplus Dialog 拖拽

热门专题