elementUI vue this.$confirm 和el-dialog 弹出框 移动
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style media="screen" type="text/css">
#appLoading {
width: 100%;
height: 100%;
} #appLoading span {
position: absolute;
display: block;
font-size: 50px;
line-height: 50px;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<div id="appLoading">
<span>Loading...</span>
</div>
<div id="app" style="display: none">
<el-dialog title="提示" width="50%" :visible.sync="startUsingDialog" v-dialog_drag>
<span> 您是否确定启用次记录?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="startUsingSubmit()" type="danger" :loading="startUsingLoading">启用</el-button>
<el-button @click="startUsingDiglog=false">取消</el-button>
</span>
</el-dialog> </div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script> $(function () {
$("body").on("mousedown", '.el-message-box__header', (e) => {
const dialogHeaderEl = document.querySelector('.el-message-box__header')
const dragDom = document.querySelector('.el-message-box')
dialogHeaderEl.style.cursor = 'move'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
// 鼠标按下，计算当前元素距离可视区的距离
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 {
let lefts = sty.left
let tops = sty.top
if (sty.left == 'auto') {
lefts = '0px'
}
if (sty.top == 'auto') {
tops = '0px'
}
styL = +lefts.replace(/\px/g, '')
styT = +tops.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`
dragDom.style.position = `absolute` // 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
} document.onmouseup = function (e) {
document.onmousemove = null
document.onmouseup = null
} })
}) Vue.directive('dialog_drag', {
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) => {
console.log(1);
// 鼠标按下，计算当前元素距离可视区的距离
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 {
let lefts = sty.left
let tops = sty.top
if (sty.left == 'auto') {
lefts = '0px'
}
if (sty.top == 'auto') {
tops = '0px'
}
styL = +lefts.replace(/\px/g, '')
styT = +tops.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
}
}
}
}) new Vue({
el: '#app',
data: function () {
return {
startUsingDialog: true,
startUsingLoading: false,
}
}, //页面加载成功时完成
mounted() {
document.getElementById('app').style.display = 'block';
document.getElementById('appLoading').style.display = 'none';
},
//方法
methods: {
startUsingSubmit() {
this.startUsingLoading=true
this.$confirm("提示", "你好!", {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(()=>{
this.startUsingLoading=false
})
this.$message({
showClose: true,
message: '这是一条消息提示',
duration: 0 //表示显示几秒, 0 表示不消失
});
}
},
})
</script>
</body>
</html>
elementUI vue this.$confirm 和el-dialog 弹出框 移动的更多相关文章
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- vue在element-ui的dialog弹出框中加入百度地图
参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...
- 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...
- JQuery EasyUI dialog弹出框的 close 和 destroy
开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...
- element-UI的Dialog弹出框蒙版被遮住
类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单 <el-dialog title="修改分类" :visible.sync="modifyFormV ...
- 弹出框插件——dialog
基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...
- Android 如何利用Activity的Dialog风格完成弹出框设计
在我们使用Dialog时,如果需要用到很多自己设计的控件,虽然可以让弹出框显示出我们需要的界面,但却无法找到地方完成控制代码的编写,如何解决这个问题呢,我们可以将Activity伪装成Dialog弹出 ...
- layer弹出框插件参数及方法介绍
layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...
- elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字
elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...
- vue之element-ui设置全局弹出框
这样的需求,在主要功能完成后,需要进行交互效果的完善,需要给请求api的时候添加一个加载中的一个弹出框.但是每个页面每个页面过的话,会很费时间和精力,这里我们可以采用element-ui中的服务式弹出 ...
随机推荐
- JQuery-zTree.js使用范例
JQuery-zTree.js使用范例 实现Tree树的插件很多,比如常见的UI:Layui.ElementUI.iView ... .这里我们介绍一个小巧的构建Tree树的插件 zTree.js z ...
- (九)Kubernetes 存储卷
Kubernetes存储卷概述 Pod本身具有生命周期,这就带了一系列的问题,第一,当一个容器损坏之后,kubelet会重启这个容器,但是文件会丢失-这个容器会是一个全新的状态:第二,当很多容器在同一 ...
- 纯数据结构Java实现(10/11)(2-3树&红黑树)
欢迎访问我的自建博客: CH-YK Blog.
- 2019年杭电多校第一场 1009题String(HDU6586+模拟+单调栈)
题目链接 传送门 题意 给你一个字符串,要你构造一个长为\(k\)的子串使得每个字母出现的次数在\([L_i,R_i](0\leq i\leq26)\)间且字典序最小. 思路 做这种题目就是要保持思路 ...
- httprunner学习9-完整的用例结构(yaml&json)
前言 前面几篇零散的学了一些httprunner的知识点,那么一个完整的 YAML/JSON 用例文件包含哪些关键字呢? 测试用例结构 在 HttpRunner 中,测试用例组织主要基于三个概念: 测 ...
- java获取一个时间段内的时间天数
package com.hzcominfo.hik.hikbigscreen.core; import java.text.SimpleDateFormat; import java.util.Arr ...
- 《快活帮》第九次团队作业：【Beta】Scrum meeting 3
项目 内容 这个作业属于哪个课程 2016计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十三 团队作业9:BETA冲刺与团队项目验收 团队名称 快活帮 作业学习目标 (1)掌 ...
- 基线baseline
vertical:元素的垂直对齐方式:默认 vertical:baseline ,一行内对其基线,如下图就是以父元素基线对齐,上图vertical:top 垂直对齐方式,行内元素头部对齐.
- （知识点1）#pragma once 与 #ifndef 解析
例如 为了避免同一个文件被include多次,C/C++中有两种方式,一种是#ifndef方式,一种是#pragma once方式.在能够支持这两种方式的编译器上,二者并没有太大的区别,但是两者仍然还 ...
- 异常STATUS_FATAL_APP_EXIT(0x40000015)
简介 STATUS_FATAL_APP_EXIT,值为0x40000015.代表的意思是"致命错误,应用退出".它定义在 ntstatus.h头文件里,如下: //// Messa ...