From 6d31f5dbd15517c2aa1c1a0e1c5afb04290f7af0 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 12 四月 2021 14:55:18 +0800
Subject: [PATCH] 弹框问题修改
---
src/utils/dragBoxes.js | 39 +++++++++++++++++++
src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 4 -
src/components/BaseNav/SolidWaste/directive/dir.js | 37 +++++-------------
src/components/BaseNav/PublicBounced/PublicBounced.vue | 37 +++++++++---------
4 files changed, 69 insertions(+), 48 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
index 2729caf..51c7f4f 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
@@ -25,14 +25,12 @@
<script>
import EChartsHour from './EChartsHour'
import EChartsDate from './EChartsDate'
-import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
export default {
name: 'PublicChart',
components: {
EChartsHour,
- EChartsDate,
- Echarts
+ EChartsDate
},
data () {
return {
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 883b7d2..8d23b01 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,9 +1,6 @@
<template>
<div class="public-bounced map-background" v-drag v-if="flag">
- <!-- <Echarts></Echarts>-->
- <div class="public-bounced-title panel-title">
- <div class="public-bounced" v-if="flag">
- <div class="public-bounced-title" draggable="true" @dragstart="drag($event)">
+ <div class="public-bounced-title panel-title" ref="publicBounced">
<span>{{ displayContentTitle }}</span>
<i class="el-icon-circle-close" @click="closePopup"></i>
</div>
@@ -17,7 +14,8 @@
<public-chart v-else :getWasteGasDetails="getWasteGasDetails"
:value="value"
:getQueryOnlineMonData="getQueryOnlineMonData"
- :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails">
+ :getWasteWaterMonitoringDetails='getWasteWaterMonitoringDetails'
+ >
</public-chart>
</div>
</div>
@@ -29,7 +27,8 @@
</template>
<script>
-import '@/components/BaseNav/SolidWaste/directive/dir'
+
+import '@/utils/dragBoxes'
import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo'
@@ -38,7 +37,7 @@
export default {
name: 'PublicBounced',
components: {
- // Echarts
+ // Echarts,
PublicTabs,
PublicTable,
PublicChart,
@@ -59,10 +58,12 @@
// getGasQueryOnlineMonData: []
}
},
+ mounted () {
+ this.$nextTick(() => {
+ console.log(this.$refs.publicBounced)
+ })
+ },
methods: {
- drag (event) {
- console.log(event)
- },
closePopup () {
this.flag = false
},
@@ -108,7 +109,6 @@
left: 20%;
.public-bounced-title {
- //cursor: pointer;
cursor: move;
height: 0.1rem;
padding: 10px 0;
@@ -123,14 +123,15 @@
}
i {
- color: #C0C4CC;
- margin: 0 15px;
- font-size: 22px;
- cursor: pointer;
+ color: #C0C4CC;
+ margin: 0 15px;
+ font-size: 22px;
+ cursor: pointer;
}
- i:hover{
- color: #00fff6;
- }
+
+ i:hover {
+ color: #00fff6;
+ }
}
.public-bounced-content {
diff --git a/src/components/BaseNav/SolidWaste/directive/dir.js b/src/components/BaseNav/SolidWaste/directive/dir.js
index ef3a982..063f6c3 100644
--- a/src/components/BaseNav/SolidWaste/directive/dir.js
+++ b/src/components/BaseNav/SolidWaste/directive/dir.js
@@ -1,45 +1,31 @@
import Vue from 'vue'
-// 浣跨敤Vue.directive()瀹氫箟涓�涓叏灞�鎸囦护
-// 1.鍙傛暟涓�锛氭寚浠ょ殑鍚嶇О锛屽畾涔夋椂鎸囦护鍓嶉潰涓嶉渶瑕佸啓v-
-// 2.鍙傛暟浜岋細鏄竴涓璞★紝璇ュ璞′腑鏈夌浉鍏崇殑鎿嶄綔鍑芥暟
-// 3.鍦ㄨ皟鐢ㄧ殑鏃跺�欏繀椤诲啓v-
+
const drag = Vue.directive('drag', {
- // 1.鎸囦护缁戝畾鍒板厓绱犱笂鍥炵珛鍒绘墽琛宐ind鍑芥暟锛屽彧鎵ц涓�娆�
- // 2.姣忎釜鍑芥暟涓涓�涓弬鏁版案杩滄槸el锛岃〃绀虹粦瀹氭寚浠ょ殑鍏冪礌锛宔l鍙傛暟鏄師鐢焜s瀵硅薄
- // 3.閫氳繃el.focus()鏄棤娉曡幏鍙栫劍鐐圭殑锛屽洜涓哄彧鏈夋彃鍏OM鍚庢墠鐢熸晥
- bind: function (el) {
- el.style.cursor = 'move' // 榧犳爣鏍峰紡鍙榤ove鏍峰紡
- },
- // inserted琛ㄧず涓�涓厓绱狅紝鎻掑叆鍒癉OM涓細鎵цinserted鍑芥暟锛屽彧瑙﹀彂涓�娆�
- inserted: function (el) {
- el.onmousedown = function (e) {
+ bind (el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.public-bounced-title')
+ dialogHeaderEl.onmousedown = function (e) {
var distX = e.pageX - el.offsetLeft
var distY = e.pageY - el.offsetTop
- // console.log('鍏冪礌鏈韩鐨勯珮锛�' + el.clientHeight + ',鍏冪礌鏈韩鐨勫锛�' + el.clientWidth)
-
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
- // 瑙ｅ喅蹇�熸嫋鍔ㄦ粸鍚庨棶棰�
-
document.onmousemove = function (e) {
- // 鐢ㄩ紶鏍囩殑浣嶇疆鍑忓幓榧犳爣鐩稿鍏冪礌鐨勪綅缃紝寰楀埌鍏冪礌鐨勪綅缃�
let left = e.clientX - distX
let top = e.clientY - distY
if (left <= 0) {
- left = 5 // 璁剧疆鎴�5鏄负浜嗕笉绂昏竟缂樺お杩�
- } else if (left > document.documentElement.clientWidth - el.clientWidth) {
- // document.documentElement.clientWidth 灞忓箷鐨勫彲瑙嗗搴�
- left = document.documentElement.clientWidth - el.clientWidth - 5
+ left = 5
+ } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
+ left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
}
if (top <= 0) {
top = 5
- } else if (top > document.documentElement.clientHeight - el.clientHeight) {
- top = document.documentElement.clientHeight - el.clientHeight - 5
+ } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
+ top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
}
+
el.style.left = left + 'px'
el.style.top = top + 'px'
}
@@ -47,9 +33,6 @@
document.onmousemove = document.onmouseup = null
}
}
- },
- // 褰揤Node鏇存柊鐨勬椂鍊欎細鎵цupdated锛屽彲浠ヨЕ鍙戝娆�
- updated: function (el) {
}
})
export default drag
diff --git a/src/utils/dragBoxes.js b/src/utils/dragBoxes.js
new file mode 100644
index 0000000..1e17b89
--- /dev/null
+++ b/src/utils/dragBoxes.js
@@ -0,0 +1,39 @@
+/* eslint */
+import Vue from 'vue'
+
+const drag = Vue.directive('drag', {
+ bind (el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.public-bounced-title')
+ dialogHeaderEl.onmousedown = function (e) {
+ var distX = e.pageX - el.offsetLeft
+ var distY = e.pageY - el.offsetTop
+ if (e.preventDefault) {
+ e.preventDefault()
+ } else {
+ e.returnValue = false
+ }
+ document.onmousemove = function (e) {
+ let left = e.clientX - distX
+ let top = e.clientY - distY
+
+ if (left <= 0) {
+ left = 5
+ } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
+ left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
+ }
+ if (top <= 0) {
+ top = 5
+ } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
+ top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
+ }
+
+ el.style.left = left + 'px'
+ el.style.top = top + 'px'
+ }
+ document.onmouseup = function () {
+ document.onmousemove = document.onmouseup = null
+ }
+ }
+ }
+})
+export default drag
--
Gitblit v1.8.0