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

随机推荐

(十)Kubernetes ConfigMap和Secret
ConfigMap资源介绍 ConfigMap是让配置文件从镜像中解耦,让镜像的可移植性和可复制性.许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息.这些配置信息需要与docker im ...
项目Alpha冲刺（团队) -- 总结及汇总
项目Alpha冲刺(团队) --总结 1.团队信息团队名 :男上加男成员信息 : 队员学号队员姓名个人博客地址备注 221600427 Alicesft https://www.cnblog ...
discuz! X3.4特殊字符乱码解决方案
Discuz! X3.4升级后,帖子内容使用Unicode编码会出现直接显示源码问题打开:source\function\function_core.php $string = str_replac ...
CalcIntegerLength
private static int CalcIntegerLength(int iLen) { //String str_iLen = Convert.ToString(iLen); int str ...
如何使用h5py读入数据
在网上找到的方法,如下: import h5py import numpy as np #HDF5的写入: imgData = np.zeros((2,4)) f = h5py.File('HDF5_ ...
python-hashlib加密
用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA512,MD5算法. 以下是算法示例: #!/usr/bin/env python # -*- c ...
（21）树莓派使用python调用命令行 python中调用linux命令及os.system的返回值
cmd = "sudo shutdown -h now"; os.system(cmd)
Landscaping Gym - 101128F (网络流)
Problem F: Landscaping \[ Time Limit: 1 s \quad Memory Limit: 256 MiB \] 题意题意是给出一个$n*m$的格子,其中一些是低 ...
isopod dsl 框架管理kubernetes 配置
isopod 是一个包含了丰富能力的dsl 框架我们可以不用编写yaml 文件来进行k8s 管理说明语法类似python,目前移植内置了一些不错的功能kube 方法 vault 集成,helm 集 ...
[RN] React Native 再按一次退出
实现 React Native 再按一次退出单页面: ... componentWillMount() { BackHandler.addEventListener('hardwareBackPre ...

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

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

随机推荐

热门专题

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

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