elementui移动dialog
1、在创建Vue对象时添加全局属性
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor = 'move' // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop // 获取到的值带px 正则匹配替换
let styL, styT // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace(/\px/g, '')
styT = +sty.top.replace(/\px/g, '')
} document.onmousemove = function(e) {
// 通过事件委托,计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY // 移动当前元素
dragDom.style.left = `${l + styL}px`
dragDom.style.top = `${t + styT}px` // 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
} document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
2、在使用elementui的Dialog时,添加dialogDrag属性,注意,这个dialogDrag与上面所创建的名称一致
elementui移动dialog的更多相关文章
- element-ui组件dialog遇到form
Vue.js似乎成了一种潮流. UI框架element-ui也跟着成了一种潮流,不过得承认,至少我个人还是非常认可的,element-ui做的是真不错. 用到element-ui,那么在dialog中 ...
- Element-ui 中dialog的使用方法
<template> <div> <el-button type="text" @click="dialogFormVisible = tr ...
- 封装element-ui的dialog组件
封装组件: <template> <div class="dialog-container"> <el-dialog title="titl ...
- Vue Element-ui自定义dialog样式
第一步:定义 自定义dialog class名 第二步:全局修改自定义样式 自定义dialogStyle有三个儿子,这样只用找到他们就可以自定更改啦 .custonStyle { xxxxx } .c ...
- elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示(SpringBoot+Vue+MybatisPlus)
文章目录 1.添加新用户,通过dialog的弹窗形式 1.1 添加的按钮 1.2 调用方法设置窗口可见 1.3 窗口代码 1.4 提交注册信息方法 1.5 使用mybatisPlus方法进行添加信息到 ...
- element-UI的Dialog弹出框蒙版被遮住
类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单 <el-dialog title="修改分类" :visible.sync="modifyFormV ...
- element-ui 中dialog居中
.el-dialog{ display: flex; flex-direction: column; margin:0 !important; ...
- 【Vue 2.X】基于ElementUI 实现 dialog弹窗移动效果-自定义指令系列(二)
v-dialogDrag: 弹窗拖拽 使用: <el-dialog XXX v-dialogDrag></el-dialog> Vue.directive('dialogDra ...
- vue在element-ui的dialog弹出框中加入百度地图
参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...
随机推荐
- 【Android - 自定义View】之View的measure过程解析
measure(测量)过程是View的工作流程中最开始.最核心的过程,在这个过程中负责确定View的测量宽/高. 对于View和ViewGroup,measure过程有不同的执行方法:如果目标是一个原 ...
- C语言l-2019秋作业01
2.1 你对软件工程专业或者计算机科学与技术专业了解是怎样? 在进入大学之前,我认为软件工程就是学习开发软件的,后来,从网上搜索了有关它的定义,软件工程是一门研究用工程化方法构建和维护软件的学科,它以 ...
- jQuery九宫格抽奖
<div id="box"> <div class="content content-1">1</div> <div ...
- PTA 1139 1138 1137 1136
PAT 1139 1138 1137 1136 一个月不写题,有点生疏..脑子跟不上手速,还可以啦,反正今天很开心. PAT 1139 First Contact 18/30 找个时间再修bug 23 ...
- css5-盒子模型
HTML<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet& ...
- Android手机打造你的Python&Java开发工具!
开发者桌面 之前写过一篇文章:将Android手机打造成你的python开发者桌面 在安卓手机上通过Termux软件,创建一个模拟Linux系统,它的好处就是无需root,即可在手机中编写Python ...
- Python基础之升级pip版本
使用python -m pip install --upgrade pip命令即可. 查看是否更新成功: 使用pip3 list命令即可.
- 转:spring4.0之二:@Configuration的使用
从Spring3.0,@Configuration用于定义配置类,可替换xml配置文件,被注解的类内部包含有一个或多个被@Bean注解的方法,这些方法将会被AnnotationConfigApplic ...
- base64转图片、图片转base64、图片拼接、加水印(水印角度可设置)
/** * @Description: 将base64编码字符串转换为图片 * @param imgStr * base64编码字符串 * @param path * 图片路径-具体到文件 * @re ...
- JS的引入方式_变量的使用_变量的类型
JS的俩种引入方式: 1. <!--js的引入方式1--> <script> /*网页中的弹框*/ alert("js的学习!!") </script ...