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 :visible.sync='dialogVisible' :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- show-overflow-tooltip></el-table-column> <el-table-column prop='mobile' label='聯系電話' width='150'></el-table-column> <el-table-column prop='censusAreaName' label='戶籍區劃' min- show-overflow-tooltip></el-table-column> <el-table-column prop='censusAddr' label='戶籍地址' min- show-overflow-tooltip></el-table-column> <el-table-column label='操作' 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;}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。