vue實現放大縮小拖拽功能
本文實例為大傢分享瞭vue實現放大縮小拖拽功能的具體代碼,供大傢參考,具體內容如下
點擊放大至全屏 再次點擊縮小至原始 這個彈框是基於element dialog的基礎上寫的
1.再utils文件夾下面新建一個directives.js (封裝好瞭 直接拿去用)
import Vue from 'vue'; import bigPic from '../assets/images/bigChange.png'; // v-dialogDrag: 彈窗拖拽屬性 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { //彈框可拉伸最小寬高 let minWidth = 400; let minHeight = 300; //初始非全屏 let isFullScreen = false; //當前寬高 let nowWidth = 0; let nowHight = 0; //當前頂部高度 let nowMarginTop = 0; //獲取彈框頭部(這部分可雙擊全屏) const dialogHeaderEl = el.querySelector('.el-dialog__header'); //彈窗 const dragDom = el.querySelector('.el-dialog'); // 全屏按鈕 dialogHeaderEl.insertAdjacentHTML('beforeEnd', '<div class="bigbtn"><div class="changeBig"></div><div class="changeSmall"></div></div>'); const bigBtn = el.querySelector('.bigbtn'); const changeBig = el.querySelector('.changeBig'); const changeSmall = el.querySelector('.changeSmall'); //給彈窗加上overflow auto;不然縮小時框內的標簽可能超出dialog; dragDom.style.overflow = "auto"; //清除選擇頭部文字效果 //dialogHeaderEl.onselectstart = new Function("return false"); //頭部加上可拖動cursor dialogHeaderEl.style.cursor = 'move'; // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); let moveDown = (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; }; } dialogHeaderEl.onmousedown = moveDown; //雙擊頭部全屏效果 bigBtn.onclick = (e) => { if (isFullScreen == false) { changeBig.style.display = 'none'; changeSmall.style.display = 'block'; nowHight = dragDom.clientHeight; nowWidth = dragDom.clientWidth; nowMarginTop = dragDom.style.marginTop; dragDom.style.left = 0; dragDom.style.top = 0; dragDom.style.height = "100VH"; dragDom.style.width = "100VW"; dragDom.style.marginTop = 0; isFullScreen = true; dialogHeaderEl.style.cursor = 'initial'; dialogHeaderEl.onmousedown = null; } else { changeBig.style.display = 'block'; changeSmall.style.display = 'none'; dragDom.style.height = "auto"; dragDom.style.width = nowWidth + 'px'; dragDom.style.marginTop = nowMarginTop; isFullScreen = false; dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.onmousedown = moveDown; } } dragDom.onmousemove = function (e) { // console.log(dialogHeaderEl,dragDom.querySelector('.el-dialog__body'), 123); let moveE = e; if (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) { dragDom.style.cursor = 'w-resize'; } else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) { dragDom.style.cursor = 's-resize'; } else { dragDom.style.cursor = 'default'; dragDom.onmousedown = null; } dragDom.onmousedown = (e) => { const clientX = e.clientX; const clientY = e.clientY; let elW = dragDom.clientWidth; let elH = dragDom.clientHeight; let EloffsetLeft = dragDom.offsetLeft; let EloffsetTop = dragDom.offsetTop; dragDom.style.userSelect = 'none'; let ELscrollTop = el.scrollTop; //判斷點擊的位置是不是為頭部 if (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) { //如果是頭部在此就不做任何動作,以上有綁定dialogHeaderEl.onmousedown = moveDown; } else { document.onmousemove = function (e) { e.preventDefault(); // 移動時禁用默認事件 //左側鼠標拖拽位置 if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) { //往左拖拽 if (clientX > e.clientX) { dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'; } //往右拖拽 if (clientX < e.clientX) { if (dragDom.clientWidth < minWidth) { } else { dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'; } } } //右側鼠標拖拽位置 if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) { //往左拖拽 if (clientX > e.clientX) { if (dragDom.clientWidth < minWidth) { } else { dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px'; } } //往右拖拽 if (clientX < e.clientX) { dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'; } } //底部鼠標拖拽位置 if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) { //往上拖拽 if (clientY > e.clientY) { if (dragDom.clientHeight < minHeight) { } else { dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px'; } } //往下拖拽 if (clientY < e.clientY) { dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px'; } } }; //拉伸結束 document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } } } })
2.再main.js引入
import './utils/directives.js';
3.頁面直接以自定義屬性名進行使用 ( v-dialogDrag )
<el-dialog v-dialogDrag title="用戶信息" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" :before-close="handleClose"> <div> <el-table :data="phoneData" style="width: 100%"> <el-table-column prop="fullName" label="姓名" width="100"></el-table-column> <el-table-column prop="sex" label="性別" width="80"></el-table-column> <el-table-column prop="idCard" label="身份證號" min-width="120" show-overflow-tooltip></el-table-column> <el-table-column prop="mobile" label="聯系電話" width="150"></el-table-column> <el-table-column prop="censusAreaName" label="戶籍區劃" min-width="120" show-overflow-tooltip></el-table-column> <el-table-column prop="censusAddr" label="戶籍地址" min-width="100" show-overflow-tooltip></el-table-column> <el-table-column label="操作" width="120" fixed="right" align="center"> <template slot-scope="{row}"> <span @click="chooseInfor(row.id)" class="table-btn">選擇</span> </template> </el-table-column> </el-table> </div> </el-dialog>
4.CSS也一並奉上 (註意查看directives.js裡面的標簽元素)
.changeBig { width: 20px; height: 20px; background: url("../assets/images/bigChange.png") no-repeat center; background-size: 100% 100%; cursor: pointer; position: absolute; top: 14px; right: 60px; } .changeSmall { width: 20px; height: 20px; background: url("../assets/images/smallChange.png") no-repeat center; background-size: 100% 100%; cursor: pointer; position: absolute; top: 14px; right: 60px; display: none; }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue實現可拖拽的dialog彈框
- Vue全局自定義指令Modal拖拽的實踐
- Vue自定義指令directive的使用方法分享
- JavaScript實現鼠標拖拽調整div大小
- vue實現div高度可拖拽