| | |
| | | :top="data.top || top + index * 42 + 'px'" |
| | | > |
| | | <div> |
| | | <layer-tree /> |
| | | <div |
| | | id="eagleMapContainer" |
| | | style="width:300px;height:400px;" |
| | | v-drag |
| | | @mousedown="dragEagle" |
| | | > |
| | | <layer-tree /> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="InfoPopupContianer"> |
| | | |
| | | </div> --> |
| | | </Popup> |
| | | </div> |
| | | </template> |
| | |
| | | top: 10, |
| | | }; |
| | | }, |
| | | directives: { |
| | | drag: { |
| | | inserted: function (el) { |
| | | const dragDom = el; |
| | | dragDom.style.cursor = "nwse-resize"; |
| | | dragDom.onmousedown = (e) => { |
| | | // 鼠标按下,计算当前元素距离可视区的距离 |
| | | const disX = e.clientX; |
| | | const w = dragDom.clientWidth; |
| | | const minW = 300; |
| | | const maxW = 500; |
| | | const disY = e.clientY; |
| | | const h = dragDom.clientHeight; |
| | | const minH = 300; |
| | | const maxH = 700; |
| | | var nw, nh; |
| | | document.onmousemove = function (e) { |
| | | // 通过事件委托,计算移动的距离 |
| | | const l = e.clientX - disX; |
| | | const r = e.clientY - disY; |
| | | // 改变当前元素宽度,不可超过最小最大值 |
| | | nw = w + l; |
| | | nw = nw < minW ? minW : nw; |
| | | nw = nw > maxW ? maxW : nw; |
| | | dragDom.style.width = `${nw}px`; |
| | | nh = h + r; |
| | | nh = nh < minH ? minH : nh; |
| | | nh = nh > maxH ? maxH : nh; |
| | | dragDom.style.height = `${nh}px`; |
| | | }; |
| | | |
| | | document.onmouseup = function (e) { |
| | | document.onmousemove = null; |
| | | document.onmouseup = null; |
| | | }; |
| | | }; |
| | | }, |
| | | }, |
| | | }, |
| | | computed: {}, |
| | | mounted() {}, |
| | | mounted() { }, |
| | | methods: { |
| | | dragEagle: function (e) { |
| | | var targetDiv = document.getElementById('eagleMapContainer'); |
| | | //得到点击时该地图容器的宽高: |
| | | var targetDivHeight = targetDiv.offsetHeight; |
| | | var startX = e.clientX; |
| | | var startY = e.clientY; |
| | | var _this = this; |
| | | document.onmousemove = function (e) { |
| | | e.preventDefault(); |
| | | //得到鼠标拖动的宽高距离:取绝对值 |
| | | var distX = Math.abs(e.clientX - startX); |
| | | var distY = Math.abs(e.clientY - startY); |
| | | //往上方拖动: |
| | | if (e.clientY < startY) { |
| | | targetDiv.style.height = targetDivHeight + distY + 'px'; |
| | | } |
| | | //往下方拖动: |
| | | if (e.clientX < startX && e.clientY > startY) { |
| | | targetDiv.style.height = (targetDivHeight - distY) + 'px'; |
| | | } |
| | | if (parseInt(targetDiv.style.height) >= 300) { |
| | | targetDiv.style.height = 300 + 'px'; |
| | | } |
| | | if (parseInt(targetDiv.style.height) <= 150) { |
| | | targetDiv.style.height = 150 + 'px'; |
| | | } |
| | | } |
| | | document.onmouseup = function () { |
| | | document.onmousemove = null; |
| | | } |
| | | }, |
| | | // 关闭所有 |
| | | closeAll() { |
| | | this.PopupData.forEach((item) => { |