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中的服务式弹出 ...
随机推荐
- SQL注入之Sqlmap使用
我们都知道,对于网络渗透最重要的一步是要拿到后台数据库管理员的密码与用户名,那么怎么得到这个用户名和密码呢?就要用到今天所说的Sqlmap,它不仅适用于内网环境,在外网环境也是非常受欢迎的,并且在Ka ...
- SaltStack--快速入门
saltstack快速入门 saltstack介绍 Salt,一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯 主要功能远程执 ...
- Properties 取值和设置函数 Hashtable的静态内部类Entry的结构和克隆方法
- python面试题&练习题之函数
1.写函数,接收两个数字参数,返回最大值例如:传入:10,20返回:20 def res_max(number1,number2): l1 = [] l1.append(number1) l1.app ...
- 最近的思考x
数据结构与文件格式: 自我管理与成长管理: 静态分析与动态分析.
- (4)给树莓派安装中文输入法Fcitx及Google拼音输入法
sudo apt-get install fcitx fcitx-googlepinyin fcitx-module-cloudpinyin fcitx-sunpinyin 安装完毕,重启即可.
- SQL Server 定期归档大表历史数据
很少有开发会考虑到数据归档的问题已经数据增长的问题,当程序运行一段时间后,就会出现各种问题,部分问题可以修改SQL语句或使用索引来解决,但如果SQL语句无法修改,糟糕的SQL语句无法使用索引,归档历史 ...
- php面试题收藏
总结几个要素: 1.个人简介名字大写,内容需要详实,一是可以给人留下映像,二是减少不必要的与面试官交换个人信息的时间.准备一份好的口头自我介绍是很有必要的,毕竟准备一次能用很久,时间花在上面很实用,面 ...
- firewall-cmd命令的富语言（richlanguage）示例
一.为协议“ah”启用新的IPv4和IPv6连接 firewall-cmd --permanent --add-rich-rule 'rule protocol value="ah" ...
- Reactive Extensions (Rx) 入门(4) —— Rx的事件编程
译文:https://blog.csdn.net/fangxing80/article/details/7685393 原文:http://www.atmarkit.co.jp/fdotnet/int ...