正在显示
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="快速尺寸信息录入生成" |
-
请 注册 或 登录 后发表评论