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

随机推荐

Django 之restfromwork 源码分析以及使用之--视图组件
restframework 源码分析以及使用 mixins 中的五种类方法 from rest_framework import mixins # mixins 中一种有五种类 # 第一种:用户保存数 ...
【Docker】Docker容器中安装netstat命令
1)先执行 apt-get update 2) 再执行 apt-get install net-tools
百度云人脸识别API人脸库管理
from urllib import request import base64 import requests import re import json import urllib impor ...
泛微e-cology OA系统某接口存在数据库配置信息泄露漏洞复现
1.简介(开场废话) 攻击者可通过存在漏洞的页面直接获取到数据库配置信息.如果攻击者可直接访问数据库,则可直接获取用户数据,甚至可以直接控制数据库服务器. 2.影响范围漏洞涉及范围包括不限于8.0. ...
httprunner学习24-sign签名验证
前言一般公司对外的接口都会用到sign签名,对不同的客户提供不同的apikey ,这样可以提高接口请求的安全性,避免被人抓包后乱请求. sign签名是一种很常见的方式关于sign签名的可以参考前面 ...
Linux 系统结构，nglinx
Linux 系统结构 Linux系统一般有4个主要部分:内核.shell.文件系统和应用程序.内核.shell和文件系统一起形成了基本的操作系统结构,它们使得用户可以运行程序.管理文件并使用系统. N ...
java 泛型类型作为参量 Class<T> transform
Class<T> transform T:作为类型,用于定义变量: transform:作为具体类的类:用于创建实例. 类型信息是脱敏的具体类: 可以使用class的具体功能: 不能使用具 ...
js原型结构图
要素:对象原型.函数原型: [p] 原型对象: p 模版对象: 要构造的对象的信息: 构造函数具有原型对象和模版对象: 普通对象只具有模版对象: https://zhuanlan.zhihu. ...
HDU6703 array
[传送门] 比赛的时候想了半天的带修改主席树(其实之前只写过一次.),两个log甚至三个log都想了,自闭了五个小时还是不会实现.问了一下西瓜得到了一个非常妙的1 log解法.此处膜瓜
kuma 学习四策略
通过策略我们可以构建灵活的service mesh 应用策略我们可以通过kumactl 以及kubectl 应用策略 kumactl 格式 echo " type: .. spec: .. ...

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

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

随机推荐

热门专题

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

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