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  <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中的服务式弹出 ...

随机推荐

python实现文件批量编码转换
起因:大三做日本交换生期间在修一门C语言图像处理的编程课,在配套书籍的网站上下载了sample,但是由于我用的ubuntu18.04系统默认用utf-8编码,而文件源码是Shift_JIS编码,因而文 ...
zabbix--监控MySQL性能
Zabbix 自带模板监控 MySQL 性能通过自带的 Template DB MySQL 模板监控 MySQL 性能具体步骤: 1)创建脚本存放目录并编辑脚本 # mkdir /etc/zabb ...
CentOS7.5搭建NFS（Network File System）
NFS(Network File System)即网络文件系统,是由Sun公司开发的一种通过网络方式共享文件系统的通用共享解决方案.可以将远程Linux系统上的文件共享资源挂载到本地主机(Linux客 ...
web渗透—xss攻击如何防御
1.基于特征的防御 XSS漏洞和著名的SQL注入漏洞一样,都是利用了Web页面的编写不完善,所以每一个漏洞所利用和针对的弱点都不尽相同.这就给XSS漏洞防御带来了困难:不可能以单一特征来概括所有XSS ...
MySQL备份python代码
import os, time, pymysql, shutil from apscheduler.schedulers.blocking import BlockingScheduler # 定时任 ...
BZOJ 3561: DZY Loves Math VI 莫比乌斯反演+复杂度分析
推到了一个推不下去的形式,然后就不会了 ~ 看题解后傻了:我推的是对的,推不下去是因为不需要再推了. 复杂度看似很大,但其实是均摊 $O(n)$ 的,看来分析复杂度也是一个能力啊 ~ code: #i ...
benchmarkdotnet dotnet 基准测试类库试用(一)
使用基准测试对于我们应用的性能优化是比较好的方式,可以快速看出优化的结果同时可以给出报告结果 benchmarkdotnet 是dotnet 版本的一个工具,以下是一个简单的试用环境准备我使用的是 ...
jstl的if标签和forEach标签的解析
今天上午学习了jstl的if标签和forEach标签(其它标签用的很少,所以没讲,只讲了这两个标签),然后通过代码练习了一下,现在总结. 首先导入包,从Apache的网站下载JSTL的JAR包.进入 ...
Linux环境下安装Redis
记录一下Linux环境下安装Redis,按顺序执行即可,这里下载的是Redis5,大家可根据自己的需求,修改版本号就好了,亲测可行. 1.下载Redis安装包cd /usr/local/wget ht ...
Nginx目录文件列表显示
项目中使用了tomcat,Nginx,测试阶段,生产阶段经常会有些bug需要调查.需要有些日志管理工具,在没有ELK的情况下,可以通过配置nginx来实现基本的日常查看.不需要登录到Linux服务器上 ...

elementUI vue this.$confirm 和el-dialog 弹出框 移动

elementUI vue this.$confirm 和el-dialog 弹出框 移动的更多相关文章

随机推荐

热门专题

elementUI vue this.$confirm 和el-dialog 弹出框移动

elementUI vue this.$confirm 和el-dialog 弹出框移动的更多相关文章