Element UI el-dialog自由拖动功能

1.创建drag .js文件

/*** 拖拽移动* @param  {elementObjct} bar 鼠标点击控制拖拽的元素* @param {elementObjct}  target 移动的元素* @param {function}  callback 移动后的回调*/
export function startDrag(bar, target, callback) {var params = {top: 0,left: 0,currentX: 0,currentY: 0,flag: false,cWidth: 0,cHeight: 0,tWidth: 0,tHeight: 0};// 给拖动块添加样式bar.style.cursor = 'move';// 获取相关CSS属性// o是移动对象// var getCss = function (o, key) {//   return o.currentStyle ? o.currentStyle[key] :             document.defaultView.getComputedStyle(o, false)[key];// };bar.onmousedown = function (event) {// 按下时初始化paramsvar e = event ? event : window.event;params = {top: target.offsetTop,left: target.offsetLeft,currentX: e.clientX,currentY: e.clientY,flag: true,cWidth: document.body.clientWidth,cHeight: document.body.clientHeight,tWidth: target.offsetWidth,tHeight: target.offsetHeight};// 给被拖动块初始化样式target.style.margin = 0;target.style.top = params.top + 'px';target.style.left = params.left + 'px';if (!event) {// 防止IE文字选中bar.onselectstart = function () {return false;}}document.onmousemove = function (event) {// 防止文字选中window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();var e = event ? event : window.event;if (params.flag) {var nowX = e.clientX;var nowY = e.clientY;// 差异距离var disX = nowX - params.currentX;var disY = nowY - params.currentY;// 最终移动位置var zLeft = 0;var zTop = 0;zLeft = parseInt(params.left) + disX;// 限制X轴范围if (zLeft <= -parseInt(params.tWidth / 2)) {zLeft = -parseInt(params.tWidth / 2);}if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) {zLeft = params.cWidth - parseInt(params.tWidth * 0.5);}zTop = parseInt(params.top) + disY;// 限制Y轴范围if (zTop <= 0) {zTop = 0;}if (zTop >= params.cHeight - parseInt(params.tHeight * 0.5)) {zTop = params.cHeight - parseInt(params.tHeight * 0.5);}// 执行移动target.style.left = zLeft + 'px';target.style.top = zTop + 'px';}if (typeof callback == "function") {callback(zLeft, zTop);}}document.onmouseup = function () {params.flag = false;document.onmousemove = null;document.onmouseup = null;};};}

2.创建directive.js 文件

// 引入拖拽js
import { startDrag } from './drag.js'/*** 为el-dialog弹框增加拖拽功能* @param {*} el 指定dom* @param {*} binding 绑定对象* desc   只要用到了el-dialog的组件,都可以通过增加v-draggable属性变为可拖拽的弹框*/
const draggable = (el, binding) => {// 绑定拖拽事件 [绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
};const directives = {draggable,
};
// 这种写法可以批量注册指令
export default {install(Vue) {Object.keys(directives).forEach((key) => {Vue.directive(key, directives[key]);});},
};

3.main.js文件中全局引入vue指令

import directive from './utils/directive'
Vue.use(directive)

4.使用v-draagble

<el-dialog title="查看订单" :visible.sync="users" width="50%" v-draggable>

参考链接:添加链接描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/767003.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习资料记录

http://interview.wzcu.com/Golang/%E4%BB%A3%E7%A0%81%E8%80%83%E9%A2%98.html map底层 https://zhuanlan.zhihu.com/p/616979764 go修养 https://www.yuque.com/aceld/golang/ga6pb1#4b19dba5 https://golang.dbwu.tech/performance/map_pre_alloc/ https://juejin.cn/pos…

C++11新特性:sizeof... 运算符

在 C11 及其后续版本中&#xff0c;引入了一项新的语言特性——sizeof...运算符&#xff0c;这是一个与模板编程紧密相关的特性。 你没看错&#xff0c;sizeof 后面是三个点&#xff1a;sizeof... sizeof...运算符用于计算变参模板&#xff08;variadic template&#xff09;…

考研数学基础差,跟宋浩?

宋浩老师的课程我大一的时候听过&#xff0c;是我大一高数的救命恩人&#xff01; 不过&#xff0c;考研的针对性很强&#xff0c;基础差听宋浩老师的课程不如直接听汤家凤老师的课程&#xff0c;因为汤家凤老师的课程是专门为考研数学设计的&#xff0c;针对性很强。 汤家凤老…

K8S之DaemonSet控制器

DaemonSet控制器 概念、原理解读、应用场景概述工作原理典型的应用场景介绍DaemonSet 与 Deployment 的区别 解读资源清单文件实践案例 概念、原理解读、应用场景 概述 DaemonSet控制器能够确保K8S集群所有的节点都分别运行一个相同的pod副本&#xff1b; 当集群中增加node节…

Django之Celery篇(一)

一、介绍 Celery是由Python开发、简单、灵活、可靠的分布式任务队列,是一个处理异步任务的框架,其本质是生产者消费者模型,生产者发送任务到消息队列,消费者负责处理任务。 Celery侧重于实时操作,但对调度支持也很好,其每天可以处理数以百万计的任务。特点: 简单:熟悉…

监控系统Prometheus--入门

文章目录 Prometheus特点易于管理监控服务的内部运行状态强大的数据模型强大的查询语言PromQL高效可扩展易于集成可视化开放性 Prometheus架构Prometheus 生态圈组件架构理解 Prometheus的安装安装Prometheus Server上传安装包解压安装包修改配置文件 prometheus.yml 安装Pushg…

Halcon 3D 平面拟合(区域采样、Z值过滤、平面拟合、平面移动)

Halcon 3D 平面拟合(区域采样、Z值过滤、平面拟合、平面移动) 链接:https://pan.baidu.com/s/1UfFyZ6y-EFq9jy0T_DTJGA 提取码:ewdi * 1.读取图片 ****************

ThreadLocal的主要特点:

ThreadLocal的主要特点&#xff1a; ThreadLocal是Java中的一个类&#xff0c;它提供了线程局部变量的实现机制。ThreadLocal的实例可以为每个使用该变量的线程提供单独的变量副本&#xff0c;每个线程可以独立地改变自己的副本&#xff0c;而不会影响其他线程的副本。这种机制…

面试问答:能聊一聊MySQL聚簇索引和非聚簇索引吗?

文章目录 &#x1f412;个人主页&#xff1a;信计2102罗铠威&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;啥叫聚簇索引和非聚簇索引&#xff1f;&#x1f415;如果按特点来说&#xff1a;&#x1f415;如果按存储引擎来说&#xff1a; &#x1f415…

【CSS】实现文字描边

通过 -webkit-text-stroke 即可实现文字描边&#xff0c;这个复合属性接收两个参数&#xff0c;分别为描边宽度&#xff0c;以及描边颜色。 需要注意的是&#xff0c;-webkit-text-stroke是一个非标准属性&#xff0c;兼容性会出现问题。 <!DOCTYPE html> <html lang…

安卓Java面试题 196- 200

196. 简述Android Window的更新过程 ?说到Window的更新过程,个人认为其实也就是Window里面View的更新过程了,和创建/删除过程一样,最后照样也是到了WindowManagerGlobal里 面执行具体的操作了,具体来讲的话就是执行updateViewLayout方法了, 这个方法里面做了以下几件事:…

What is case-based reasoning (CBR)? 基于案例的推理

这个方向其实挺小众的&#xff0c;然后其实也很直觉&#xff0c;所以你可能其实一直在用这个技术&#xff0c;只不过你不知道这个技术有一个专业的名字《基于案例的推理》而已。 有人说&#xff0c;不知道名字有啥的&#xff0c;反正大家都会用&#xff0c;不需要学它叫什么名…

数组三(冒泡排序、二分查找)

目录 冒泡排序算法 冒泡排序的基础算法 冒泡排序的优化算法 二分法查找 冒泡排序算法 冒泡排序是最常用的排序算法&#xff0c;在笔试中也非常常见&#xff0c;能手写出冒泡排序算法可以说是 基本的素养。 冒泡排序的基础算法 冒泡排序算法重复地走访过要排序的数列&#…

eUICC鉴权的一般步骤

eUICC&#xff08;嵌入式通用集成电路卡&#xff09;的鉴权过程涉及多个步骤&#xff0c;主要目的是确保eUICC的安全操作和用户的身份验证。以下是eUICC鉴权过程的一般步骤&#xff1a; 1. **初始化**&#xff1a;当用户启动设备或尝试连接到移动网络时&#xff0c;eUICC会开始…

2024-03-22 问AI: 介绍一下深度学习中的 sigmoid函数

文心一言 Sigmoid函数是深度学习中常用的一种激活函数&#xff0c;主要用于将神经元的输出值压缩到0和1之间。这种特性使得sigmoid函数在二分类问题中特别有用&#xff0c;因为输出值可以被解释为属于某个类别的概率。 sigmoid函数的数学表达式为&#xff1a; σ(x) 1 / (1…

Pytorch CUDA Reflect Padding 算子实现详解

CUDA 简介 CUDA&#xff08;Compute Unified Device Architecture&#xff09;是由NVIDIA开发的一种并行计算平台和应用编程接口&#xff08;API&#xff09;&#xff0c;允许软件开发者和软件工程师使用NVIDIA的图形处理单元&#xff08;GPU&#xff09;进行通用计算。自2007…

为什么守护网络安全需要用高防IP

在数字化浪潮中&#xff0c;网络安全问题日益凸显&#xff0c;网络攻击事件频发&#xff0c;给企业的业务发展带来了严重威胁。面对这一挑战&#xff0c;高防IP应运而生&#xff0c;以其强大的防护能力和稳定的性能&#xff0c;成为企业网络安全的重要守护神。 高防IP&#xf…

NodeJS 集群模块: 为App创建集群实例

NodeJS 集群模块: 为App创建集群实例 目录 NodeJS 集群模块: 为App创建集群实例Node.js 集群介绍:终极扩展策略使用集群模块开始扩展 Node.js扩展 Node.js 的两种集群策略使用集群受益的 Node.js 应用程序示例没有集群的 Node.js:不可伸缩的原则集群操作:一个扩展的 Node.js…

Redis 配置与优化

目录 一、Redis 介绍 1.1、关系数据库与非关系型数据库 1&#xff09;关系型数据库 2&#xff09;非关系型数据库 3&#xff09;非关系型数据库产生背景 1.2、Redis 基础 1&#xff09;Redis 简介 2&#xff09;Redis 安装部署 3&#xff09;配置参数 1.3、Redi…

【聊一聊】三种工厂模式的创建

三种工厂模式的创建 今天终于星期五了,最近由于碰上一个需求,中间涉及Oracle改国产数据库的改造,好家伙,差点没把我忙坏了 不过今天终于有空啦!~哈哈哈 这篇本应该是上周就结束的,但是拖到今天,我们就今天进行结束 (还有一件快乐的事情,就是我遇见自己喜欢的人啦!嘻嘻) 好啦!~话…