欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 18:49:42
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  弹出框 移动

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