正在显示
3 个修改的文件
包含
52 行增加
和
3 行删除
src/drag.js
0 → 100644
| 1 | +import Vue from 'vue' | ||
| 2 | + | ||
| 3 | +// v-dialogDrag: 弹窗拖拽 | ||
| 4 | +Vue.directive('dialogDrag', { | ||
| 5 | + bind(el, binding, vnode, oldVnode) { | ||
| 6 | + const dialogHeaderEl = el.querySelector('.el-dialog__header') | ||
| 7 | + const dragDom = el.querySelector('.el-dialog') | ||
| 8 | + dialogHeaderEl.style.cursor = 'move' | ||
| 9 | + | ||
| 10 | + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); | ||
| 11 | + const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) | ||
| 12 | + | ||
| 13 | + dialogHeaderEl.onmousedown = (e) => { | ||
| 14 | + // 鼠标按下,计算当前元素距离可视区的距离 | ||
| 15 | + const disX = e.clientX - dialogHeaderEl.offsetLeft | ||
| 16 | + const disY = e.clientY - dialogHeaderEl.offsetTop | ||
| 17 | + | ||
| 18 | + // 获取到的值带px 正则匹配替换 | ||
| 19 | + let styL, styT | ||
| 20 | + | ||
| 21 | + // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px | ||
| 22 | + if (sty.left.includes('%')) { | ||
| 23 | + styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) | ||
| 24 | + styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) | ||
| 25 | + } else { | ||
| 26 | + styL = +sty.left.replace(/\px/g, '') | ||
| 27 | + styT = +sty.top.replace(/\px/g, '') | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + document.onmousemove = function(e) { | ||
| 31 | + // 通过事件委托,计算移动的距离 | ||
| 32 | + const l = e.clientX - disX | ||
| 33 | + const t = e.clientY - disY | ||
| 34 | + | ||
| 35 | + // 移动当前元素 | ||
| 36 | + dragDom.style.left = `${l + styL}px` | ||
| 37 | + dragDom.style.top = `${t + styT}px` | ||
| 38 | + | ||
| 39 | + // 将此时的位置传出去 | ||
| 40 | + // binding.value({x:e.pageX,y:e.pageY}) | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + document.onmouseup = function(e) { | ||
| 44 | + document.onmousemove = null | ||
| 45 | + document.onmouseup = null | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | +}) |
| @@ -11,7 +11,7 @@ import rout from './routes' | @@ -11,7 +11,7 @@ import rout from './routes' | ||
| 11 | // import Mock from './mock' | 11 | // import Mock from './mock' |
| 12 | import i18n from './lang' | 12 | import i18n from './lang' |
| 13 | import 'font-awesome/css/font-awesome.min.css' | 13 | import 'font-awesome/css/font-awesome.min.css' |
| 14 | - | 14 | +import drag from './drag' |
| 15 | import * as socketApi from './api/socket' | 15 | import * as socketApi from './api/socket' |
| 16 | import '@/styles/index.scss' | 16 | import '@/styles/index.scss' |
| 17 | import sys_init from '@/common/init/sys_init' | 17 | import sys_init from '@/common/init/sys_init' |
| @@ -1844,7 +1844,7 @@ Handling Information | @@ -1844,7 +1844,7 @@ Handling Information | ||
| 1844 | </el-tab-pane> | 1844 | </el-tab-pane> |
| 1845 | </el-tabs> | 1845 | </el-tabs> |
| 1846 | <!-- 主单获取尺寸信息--> | 1846 | <!-- 主单获取尺寸信息--> |
| 1847 | - <el-dialog title="尺寸信息" :visible.sync="dialogTableVisible" width="80%"> | 1847 | + <el-dialog title="尺寸信息" :visible.sync="dialogTableVisible" width="80%" v-dialog-drag> |
| 1848 | <el-row :gutter="10"> | 1848 | <el-row :gutter="10"> |
| 1849 | <el-col :span="18"> | 1849 | <el-col :span="18"> |
| 1850 | <el-table :data="gridData" :cell-style="{textAlign:'center'}" show-summary | 1850 | <el-table :data="gridData" :cell-style="{textAlign:'center'}" show-summary |
| @@ -1899,7 +1899,7 @@ Handling Information | @@ -1899,7 +1899,7 @@ Handling Information | ||
| 1899 | <el-col :span="6"> | 1899 | <el-col :span="6"> |
| 1900 | <el-tooltip class="item" effect="dark" content="可以将整体的尺寸信息复制进来,一行一个尺寸信息,系统会自动识别" placement="top-start"> | 1900 | <el-tooltip class="item" effect="dark" content="可以将整体的尺寸信息复制进来,一行一个尺寸信息,系统会自动识别" placement="top-start"> |
| 1901 | <el-input | 1901 | <el-input |
| 1902 | - rows="6" | 1902 | + :autosize="{ minRows: 7, maxRows: 20}" |
| 1903 | resize = "vertical" | 1903 | resize = "vertical" |
| 1904 | type="textarea" | 1904 | type="textarea" |
| 1905 | placeholder="快速尺寸信息录入生成" | 1905 | placeholder="快速尺寸信息录入生成" |
-
请 注册 或 登录 后发表评论