调试了好久, 还能凑合用, 请直接看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 弹出框 移动的更多相关文章

  1. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  2. vue在element-ui的dialog弹出框中加入百度地图

    参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...

  3. 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题

    问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...

  4. JQuery EasyUI dialog弹出框的 close 和 destroy

    开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...

  5. element-UI的Dialog弹出框蒙版被遮住

    类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单 <el-dialog title="修改分类" :visible.sync="modifyFormV ...

  6. 弹出框插件——dialog

    基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...

  7. Android 如何利用Activity的Dialog风格完成弹出框设计

    在我们使用Dialog时,如果需要用到很多自己设计的控件,虽然可以让弹出框显示出我们需要的界面,但却无法找到地方完成控制代码的编写,如何解决这个问题呢,我们可以将Activity伪装成Dialog弹出 ...

  8. layer弹出框插件参数及方法介绍

    layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...

  9. elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字

    elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...

  10. vue之element-ui设置全局弹出框

    这样的需求,在主要功能完成后,需要进行交互效果的完善,需要给请求api的时候添加一个加载中的一个弹出框.但是每个页面每个页面过的话,会很费时间和精力,这里我们可以采用element-ui中的服务式弹出 ...

随机推荐

  1. ARM架构体系

    架构 处理器家族 ARMv1 ARM1 ARMv2 ARM2.ARM3 ARMv3 ARM6, ARM7 ARMv4 StrongARM.ARM7TDMI.ARM9TDMI ARMv5 ARM7EJ. ...

  2. 《linux就该这么学》课堂笔记09 存储结构、磁盘划分

    Linux一切都是文件 "/"为根目录(万物起始)  **挂载后要想永久生效,需要修改开机启动项 vim /etc/fstab  

  3. Linux命令学习之文件管理

    ~~~~~~~~~~~~ 前言 ~~~~~~~~~~~~ 推荐一个很好的练习平台:https://overthewire.org/wargames/ Wargames有很多个关卡,从基础的Linux使 ...

  4. Mac Docker安装Redis4.0

    mkdir redis 在~目录下创建redis目录 docker run -d -p 6379:6379 -v $PWD/redis:/data -d --name redis4.0 redis:4 ...

  5. Android Studio在代码重构中的妙用

    代码重构几乎是每个程序员在软件开发中必须要不断去做的事情,以此来不断提高代码的质量.Android Stido(以下简称AS)以其强大的功能,成为当下Android开发工程师最受欢迎的开发工具,也是A ...

  6. WebLogic任意文件上传漏洞(CVE-2019-2618)

    WebLogic任意文件上传漏洞(CVE-2019-2618) 0x01 漏洞描述 漏洞介绍 CVE-2019-2618漏洞主要是利用了WebLogic组件中的DeploymentService接口, ...

  7. eclipse 中的注释 快捷键 多行注释快捷键 单行注释快捷键

    Eclipse 中的两种注释方法: (1)多行注释(2)单行注释 一. 多行注释快捷键 1:添加注释Ctrl+Shift+/ :    添加/* */注释 示例:选中代码块后按下快捷键即可 /* fl ...

  8. UI的编程学本质

    一.UI是数据的组织方式.展示及连接 UI模块--数据单元: 链接---数据单元间的联系: 相对链接-数据结构的树.链表: 绝对链接-大的模块级别的切换: 二.UI的IO学本质 屏幕.键盘 将信息输出 ...

  9. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  10. 洛谷 P1786 帮贡排序 题解

    P1786 帮贡排序 题目背景 在absi2011的帮派里,死号偏多.现在absi2011和帮主等人联合决定,要清除一些死号,加进一些新号,同时还要鼓励帮贡多的人,对帮派进行一番休整. 题目描述 目前 ...