作者 小范

弹框拖动

  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="快速尺寸信息录入生成"