短視訊直播系統,Vue實現element-ui彈框可以拖拽
短視訊直播系統,Vue實現element-ui彈框可以拖拽
一、utils資料夾下建立dialog.js檔案
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.cursor = 'move' // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) dialogHeaderEl.onmousedown = (e) => { // 滑鼠按下,計算當前元素距離可視區的距離 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 { styL = +sty.left.replace(/\px/g, '') styT = +sty.top.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 } } } })
二、在main.js中全域性引用
import './utils/dialog'
三、使用方法:給el-dialog新增v-dialogDrag屬性
<el-dialog v-dialogDrag></el-dialog>
以上就是短視訊直播系統,Vue實現element-ui彈框可以拖拽, 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2900954/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何理解元宇宙系統開發的未來性?
- 「BUIDLCON2022」“Web3 開發者峰會”線上報名火熱開啟!
- JuiceFS V1.0 RC1 釋出,大幅優化 dump/load 命令效能, 深度使用者不容錯過
- 智慧狩獵者Hunter機器人系統開發(定製)
- NFT原力星球系統——Coinbase錢包系統(搭建)
- NFT元宇宙系統的定義與概念
- 區塊鏈公鏈系統發展,主鏈系統發展方向
- NFT數字藏品系統的發展方案
- SAP系統合併後整合:應避免的4個錯誤
- 解決方案| 快對講綜合排程系統
- 成品直播原始碼推薦,登入介面實現插入背景
- Java溯源防偽管理系統原始碼,一物一碼二維碼防偽追溯系統原始碼
- 直播系統原始碼,MAP的幾種取資料的方式
- 以“數字化渠道”撬動家用電器消費藍海,經銷商線上系統讓企業生意更進一步
- 【 GBASE的那些事兒】系列直播活動第01期《GBASE資料庫在信創領域的優勢及應用》
- 短連結系統的設計與實現
- vue大型電商專案尚品彙(後臺篇)day02