element-ui dialog組件添加可拖拽位置 可拖拽寬高
阿新 • • 發佈:2018-03-17
瀏覽器 client pos eight rep sem per 由於 let
有幾個點需要註意一下
- 每個彈窗都要有唯一dom可操作 指令可以做到
- 拖拽時要添加可拖拽區塊 header
- 由於element-ui dialog組件在設計時寬度用了百分比, 這裏不同瀏覽器有兼容性問題
- 實現拖拽寬高時 獲取邊緣問題 div定位 設置模擬邊緣
<template> <el-dialog v-dialogDrag ref="dialog__wrapper"> <div class="dialog-body"> <div class="line" v-dialogDragWidth="$refs.dialog__wrapper"></div> </div> </el-dialog> </template>
dialog組件的其它屬性這裏就不寫了. 項目中的指令都定義directives.js中集中管理, 全局註冊.
directives.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; }; } } }) // v-dialogDragWidth: 彈窗寬度拖大 拖小 Vue.directive(‘dialogDragWidth‘, { bind(el, binding, vnode, oldVnode) { const dragDom = binding.value.$el.querySelector(‘.el-dialog‘); el.onmousedown = (e) => { // 鼠標按下,計算當前元素距離可視區的距離 const disX = e.clientX - el.offsetLeft; document.onmousemove = function (e) { e.preventDefault(); // 移動時禁用默認事件 // 通過事件委托,計算移動的距離 const l = e.clientX - disX; dragDom.style.width = `${l}px`; }; document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } })
main.js:
// 引入自定義指令
import ‘./directives.js‘;
感謝:Tony_BringWater
element-ui dialog組件添加可拖拽位置 可拖拽寬高