From 5f92af684f38e55623ce39e8b4640e3db76a2c9c Mon Sep 17 00:00:00 2001 From: dong <58670809@qq.com> Date: Mon, 30 Jan 2023 17:52:26 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=88=E7=AB=AF=E8=8F=9C=E5=8D=95=E5=9E=82?= =?UTF-8?q?=E7=9B=B4=E6=8B=96=E6=8B=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directive/verticalDrag/index.js | 8 ++ src/directive/verticalDrag/verticalDrag.js | 100 ++++++++++++++++++ src/main.js | 1 + .../terminals/dispatcherLoger/index.vue | 2 +- .../newMap/display/terminals/terminalMenu.vue | 8 +- 5 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 src/directive/verticalDrag/index.js create mode 100644 src/directive/verticalDrag/verticalDrag.js diff --git a/src/directive/verticalDrag/index.js b/src/directive/verticalDrag/index.js new file mode 100644 index 000000000..73c83960a --- /dev/null +++ b/src/directive/verticalDrag/index.js @@ -0,0 +1,8 @@ +import Vue from 'vue'; +import install from './verticalDrag'; + +const verticalDrag = function(Vue) { + Vue.directive('verticalDrag', install); +}; + +Vue.use(verticalDrag); diff --git a/src/directive/verticalDrag/verticalDrag.js b/src/directive/verticalDrag/verticalDrag.js new file mode 100644 index 000000000..75125e873 --- /dev/null +++ b/src/directive/verticalDrag/verticalDrag.js @@ -0,0 +1,100 @@ +/* 垂直拖拽 */ +export default { + bind(el) { + const dialogHeaderEl = el.querySelector('.verticalDrag__header'); + const dialogFooterEl = el.querySelector('.verticalDrag__footer'); + const dragDom = el; + dialogHeaderEl.style.cursor = 'move'; + dialogFooterEl.style.cursor = 'move'; + + /** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/ + const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); + + dialogHeaderEl.onmousedown = (e) => { + e.stopPropagation(); + /** 鼠标按下，计算当前元素距离可视区的距离*/ + const disY = e.clientY; + const oY = e.offsetY; + const bY = dragDom.offsetHeight; + + /** 获取到的值带px 正则匹配替换*/ + let styT; + + /** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/ + if (sty.top.includes('%')) { + styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100); + } else { + styT = +sty.top.replace(/\px/g, ''); + } + + document.onmousemove = function (e) { + e.preventDefault(); + e.stopPropagation(); + let cY = e.clientY; + if (cY < oY) { + cY = oY; + } + if (cY > document.body.clientHeight - bY) { + cY = document.body.clientHeight - bY; + } + /** 通过事件委托，计算移动的距离*/ + const t = cY - disY; + + /** 移动当前元素*/ + dragDom.style.top = `${t + styT}px`; + + /** 将此时的位置传出去*/ + // binding.value({ x: e.pageX, y: e.pageY }); + }; + + document.onmouseup = function () { + e.stopPropagation(); + document.onmousemove = null; + document.onmouseup = null; + }; + }; + dialogFooterEl.onmousedown = (e) => { + e.stopPropagation(); + /** 鼠标按下，计算当前元素距离可视区的距离*/ + const disY = e.clientY; + const oY = e.offsetY; + const bY = dragDom.offsetHeight; + + /** 获取到的值带px 正则匹配替换*/ + let styT; + + /** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/ + if (sty.top.includes('%')) { + styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100); + } else { + styT = +sty.top.replace(/\px/g, ''); + } + + document.onmousemove = function (e) { + e.preventDefault(); + e.stopPropagation(); + let cY = e.clientY; + if (cY < bY) { + cY = bY; + } + if (cY > document.body.clientHeight - oY) { + cY = document.body.clientHeight - oY; + } + /** 通过事件委托，计算移动的距离*/ + const t = cY - disY; + + /** 移动当前元素*/ + dragDom.style.top = `${t + styT}px`; + + /** 将此时的位置传出去*/ + // binding.value({ x: e.pageX, y: e.pageY }); + }; + + document.onmouseup = function () { + e.stopPropagation(); + document.onmousemove = null; + document.onmouseup = null; + }; + }; + } +}; diff --git a/src/main.js b/src/main.js index 0e17c5626..e7ada36b6 100644 --- a/src/main.js +++ b/src/main.js @@ -24,6 +24,7 @@ import '@/directive/dialogLoading/index.js'; import '@/directive/drag/index.js'; import '@/directive/focus/index.js'; import '@/directive/quickMenuDrag/index.js'; +import '@/directive/verticalDrag/index.js'; import '@/directive/waves/index.js'; import messages from '@/i18n/index'; diff --git a/src/views/newMap/display/terminals/dispatcherLoger/index.vue b/src/views/newMap/display/terminals/dispatcherLoger/index.vue index 01253cc1e..65fcfc714 100644 --- a/src/views/newMap/display/terminals/dispatcherLoger/index.vue +++ b/src/views/newMap/display/terminals/dispatcherLoger/index.vue @@ -204,7 +204,7 @@ export default { }, data() { return { - height: this.$store.state.app.height - 37, + height: this.$store.state.app.height - 38, filterSectionList:[], mapStationDirectionData:[], // filterSectionMap:{}, diff --git a/src/views/newMap/display/terminals/terminalMenu.vue b/src/views/newMap/display/terminals/terminalMenu.vue index 22d63de3e..6311c4973 100644 --- a/src/views/newMap/display/terminals/terminalMenu.vue +++ b/src/views/newMap/display/terminals/terminalMenu.vue @@ -1,7 +1,9 @@ @@ -322,6 +324,10 @@ export default { border-radius: 5px 0 0 5px; z-index: 2000; } +.drag-line { + width: 100%; + height: 5px; +} .eachTerminal{ padding: 8px 0; text-align: center;