vue弹窗设置fixed进行拖拽，不超过浏览器

效果：

 

// 鼠标按下事件 移动弹窗
            mousedown: function (event) {  //  mousedown绑定在可拖拽的元素上
                if (this.isDrag) {
                    let loongDialog = this.$refs.loongDialog; // 弹窗的ref
                    let offsetTop = loongDialog.offsetTop;
                    let offsetLeft = loongDialog.offsetLeft;
                    let clientX = event.clientX;
                    let clientY = event.clientY;
                    let _this = this;
                    document.onmousemove = e => {
                        e.preventDefault(); //取消事件的默认动作
                        let windowHei = window.innerHeight;
                        let windowWid = window.innerWidth;
                        let wid = loongDialog.offsetWidth;
                        let hei = loongDialog.offsetHeight;
                        let bottom = windowHei - hei;
                        let right = windowWid - wid;
                        let clientXNow = e.clientX;
                        let clientYNow = e.clientY;
                        let top = clientYNow - clientY + offsetTop;
                        let left = clientXNow - clientX + offsetLeft;
                        if (top <= 0) {
                            top = 0;
                        }
                        if (left <= 0) {
                            left = 0;
                        }
                        if (left >= right) {
                            left = right
                        }
                        if (top >= bottom) {
                            top = bottom;
                        }
                        _this.top = top + 'px';
                        _this.left = left + 'px';

                    };
                }
            },
// 鼠标松开事件
            mouseup: function () {
                document.onmousemove = null;
                document.onmouseup = null;
            },