本文主要介紹了vue實(shí)現(xiàn)可拖拽的dialog彈框，分享給大家，具體如下：

element的dialog彈框在項目中挺常用的。但有時候嵌套的話會遮住，體驗(yàn)不好。拖拽形式的彈框會提高用戶體驗(yàn)

借助基于 Sortable.js 的 Vue 拖拽組件vuedraggable

安裝

npm install vuedraggable --save

在公共組件中新建個js文件，搭配vue自定義指令來實(shí)現(xiàn)拖拽的效果

import Vue from ’vue’; // v-dialogDrag: 彈窗拖拽屬性Vue.directive(’dialogDrag’, { bind(el, binding, vnode, oldVnode) {const dialogHeaderEl = el.querySelector(’.el-dialog__header’);const dragDom = el.querySelector(’.el-dialog’); dialogHeaderEl.style.cssText += ’;cursor:move;’dragDom.style.cssText += ’;top:0px;’ // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = (() => { if (window.document.currentStyle) {return (dom, attr) => dom.currentStyle[attr]; } else {return (dom, attr) => getComputedStyle(dom, false)[attr]; }})() dialogHeaderEl.onmousedown = (e) => { // 鼠標(biāo)按下，計算當(dāng)前元素距離可視區(qū)的距離 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; const screenWidth = document.body.clientWidth; // body當(dāng)前寬度 const screenHeight = document.documentElement.clientHeight; // 可見區(qū)域高度(應(yīng)為body高度，可某些環(huán)境下無法獲取) const dragDomWidth = dragDom.offsetWidth; // 對話框?qū)挾? const dragDomheight = dragDom.offsetHeight; // 對話框高度 const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; // 獲取到的值帶px 正則匹配替換 let styL = sty(dragDom, ’left’); let styT = sty(dragDom, ’top’); // 注意在ie中 第一次獲取到的值為組件自帶50% 移動之后賦值為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) {// 通過事件委托，計算移動的距離let left = e.clientX - disX;let top = e.clientY - disY; // 邊界處理if (-(left) > minDragDomLeft) { left = -(minDragDomLeft);} else if (left > maxDragDomLeft) { left = maxDragDomLeft;} if (-(top) > minDragDomTop) { top = -(minDragDomTop);} else if (top > maxDragDomTop) { top = maxDragDomTop;} // 移動當(dāng)前元素 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; }; document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null; };} }})

頁面中使用 v-dialogDrag 即可實(shí)現(xiàn)想要的效果

<el-dialog v-dialogDrag :title='dialogTitle' :visible.sync='addDialogVisible' :before-close='handleClose' :close-on-click-modal='false' width='50%'> <div class='add_columns'><div class='pull-organize'> <div class='bm-title'>部門管理</div> <el-tree:data='treeData'lazy:load='loadNode'accordion :props='defaultProps':default-expand-all='false'> </el-tree></div><div class='show-information'> <el-form inline><el-form-item label='用戶ID'> <el-input v-model='searchParams.userId' size='mini' ></el-input></el-form-item><el-form-item label='用戶名'> <el-input v-model='searchParams.userName' size='mini'></el-input></el-form-item><el-form-item class='btn-item'> <el-button type='primary' @click='handleQuery' size='mini'>查詢</el-button></el-form-item> <el-form-item class='btn-item'> <el-button type='success' @click='hadnleAddPerson' size='mini'>添加人員</el-button></el-form-item> </el-form> <el-table:data='tableData' style='width:100%;'><el-table-column type='selection' width='50'></el-table-column><el-table-column prop='id' label='登錄ID'></el-table-column><el-table-column prop='userName' label='用戶名'></el-table-column><el-table-column prop='education' label='部門'></el-table-column><el-table-column prop='sex' label='手機(jī)'></el-table-column> </el-table></div> </div></el-dialog>

到此這篇關(guān)于vue實(shí)現(xiàn)可拖拽的dialog彈框的文章就介紹到這了,更多相關(guān)vue 可拖拽彈框內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！