Transfer instruction package https://blog.csdn.net/sinat_21902709/article/details/86545444
Can be used in many drag the dialog box pops up, we need to act on global
Create a file in the plugin folder dialogDrag public storage instructions
import Vue from "vue"; // V-dialogDrag: pop drag properties Vue.directive ( " dialogDrag " , { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector(".el-dialog__header"); const dragDom = el.querySelector(".el-dialog"); //dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.cssText += ";cursor:move;"; dragDom.style.cssText += ";top:0px;"; // Get original attribute ie dom element .currentStyle Firefox Google window.getComputedStyle (dom element, null); const STY = (function () { IF (window.document.currentStyle) { return (DOM, attr) => DOM. currentStyle [attr]; } else { return (dom, attr) => getComputedStyle(dom, false)[attr]; } })(); dialogHeaderEl.onmousedown = E => { // mouse-down, the current element is calculated from the distance of the visible region const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; const screenWidth = document.body.clientWidth; // body current width const screenHeight = document.documentElement.clientHeight; // visible area height (body height should, under certain circumstances can not obtain) const dragDomWidth = dragDom.offsetWidth; // box width const dragDomheight = dragDom.offsetHeight; // dialog height const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; // Get the value match with regular px Alternatively the let STYL = STY (dragDom, " left " ); let styT = sty(dragDom, "top"); // Assignment Note that after the first acquired value ie the assembly comes as a 50% mobile PX IF (styL.includes ( " % " )) { styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100); styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100); } else { styL = +styL.replace(/\px/g, ""); styT = +styT.replace(/\px/g, ""); } document.onmousemove = function (E) { // by event delegate calculates the distance moved the let e.clientX = left - disX; let top = e.clientY - disY; // boundary processing IF (-left> minDragDomLeft) { left = -minDragDomLeft; } else if (left > maxDragDomLeft) { left = maxDragDomLeft; } if (-top > minDragDomTop) { top = -minDragDomTop; } else if (top > maxDragDomTop) { top = maxDragDomTop; } // move the current element dragDom.style.cssText + = `; left: left $ {+} STYL PX; Top: Top + $ { styT} PX;`; }; document.onmouseup = function(e) { document.onmousemove = null; document.onmouseup = null; }; }; } });
The introduction of public instruction in main.js file
// introduced defined instructions Import " ./plugins/dialogDrag/directives " ;
Then directly be used in the assembly
<! - used as a custom command v-dialogDrag -> <template> <div id="addExpressDialog" v-show="isShowExpressDialog" v-dialogDrag> <el-dialog :visible.sync="isShowExpress" class="dialog_container" center> <div slot="title" class="dialog-title"> {{title}} </div> <div class="dialog_content"> content </div> </el-dialog> </div> </template> <script> Import view from 'View' import { Dialog } from 'element-ui' Vue.use(Dialog) export default { name: 'addExpressDialog', props: { title: { type: String }, isShowExpressDialog: { type: Boolean, default: false }, dialogType: { type: String } }, data() { return {} }, mounted() {}, computed: { isShowExpress: { get() { return this.isShowExpressDialog }, set(v) { this.$emit('closeExpressDialog', v) } } }, watch: {}, methods: {} } </script> <style lang="scss"> cis-modal { z-index: 0 !important; } #addExpressDialog { .el-dialog { width: 431px; height: 222px; position: relative; margin: 0 auto; margin-top: 0px !important; margin-bottom: 0px !important; background: url('../../../../assets/images/sysinformation/bg_popup_del.png') no-repeat; .el-dialog__header { padding: 5px 0px 0px 0px; .el-dialog__headerbtn { top: 5px; } } } } </style> <style lang="scss" scoped> #addExpressDialog { position: fixed; height: calc(100% - 80px); top: 80px; bottom: 0px; left: 0px; right: 0px; z-index: 9999 !important; .dialog_container { height: calc(100% - 80px); top: 80px !important; overflow: hidden; .dialog-title { color: rgba(255, 255, 255, 1); } } } </style>
Simple renderings
You can drag