11<template >
2- <div class =" layout-footer"
3- <resource-simple
4- ref =" resourceSimple"
5- :dispatch =" dispatch"
6- @update-job =" updateJob"
7- </resource-simple >
8- <div class =" footer-btn footer-channel"
9- :title =" msg"
10- ref =" footerChannel"
11- @mousedown.prevent.stop =" onMouseDown"
12- @mouseup.prevent.stop =" oMouseUp"
13- @click.prevent.stop =" toast"
14- <SvgIcon class =" footer-channel-job" icon-class =" job"
15- <span class =" footer-channel-job-num" span >
2+ <div class =" layout-footer" @mousemove =" onMouseMove" :style =" {'pointer-events': `${isMouseDown ? 'initial' : 'none'}`}"
3+ <div ref =" footerChannel" class =" tool-btns" @mousedown.prevent.stop =" onMouseDown"
4+ <template v-if =" ! min " >
5+ <resource-simple
6+ ref =" resourceSimple"
7+ :dispatch =" dispatch"
8+ @update-job =" updateJob"
9+ </resource-simple >
10+ <div class =" footer-btn footer-channel"
11+ :title =" msg"
12+ @click =" toast"
13+ <SvgIcon class =" footer-channel-job" icon-class =" job"
14+ <span class =" footer-channel-job-num" span >
15+ </div >
16+ <Icon type =" md-arrow-dropdown" class =" min_arrow" @click =" min=true"
17+ </template >
18+ <Icon v-else type =" md-arrow-dropup" class =" show_arrow" @click =" min=false"
1619 </div >
1720 </div >
1821</template >
@@ -27,10 +30,9 @@ export default {
2730 return {
2831 num: 0 ,
2932 msg: ' '
30- moveX: null ,
31- moveY: null ,
32- isMouseDrop: false ,
33- isMouseMove: false ,
33+ min: false ,
34+ isMouseDown: false ,
35+ isMouseMove: false
3436 };
3537 },
3638 created () {
@@ -39,6 +41,13 @@ export default {
3941 this .getRunningJob ();
4042 }, 500 );
4143 },
44+ mounted () {
45+ this .positionInfo = { x: 0 , y: 0 }
46+ document .onmouseup = () => {
47+ this .isMouseDown = false ;
48+ }
49+ window .addEventListener (' resize' this .resetChannelPosition )
50+ },
4251 watch: {
4352 ' $route'
4453 this .resetChannelPosition ()
@@ -64,73 +73,54 @@ export default {
6473 this [method](num);
6574 },
6675 toast () {
67- // 取消拖动后自动点击事件
68- if (this .isMouseMove ) {
69- return ;
76+ if (! this .isMouseMove ) {
77+ this .$refs .resourceSimple .open ();
7078 }
71- this .$refs .resourceSimple .open ();
7279 },
7380 onMouseDown (e ) {
74- e = e || window .event ;
7581 const footerChannel = this .$refs .footerChannel ;
76- this .moveX = e .clientX - footerChannel .offsetLeft ;
77- this .moveY = e .clientY - footerChannel .offsetTop ;
78- this .isMouseDrop = true ;
79- this .isMouseMove = false ;
80- // 阻止拖拽过程中选中文本
81- document .onselectstart = () => {
82- return false ;
82+ this .positionInfo = {
83+ x: e .clientX - footerChannel .offsetLeft ,
84+ y: e .clientY - footerChannel .offsetTop
8385 }
84- // 这里无法在元素上使用@mousemove，否则拖动会有卡顿
85- // 使用setTimeout是防止点击的同时会触发move事件，这时正常的点击事件是不会触发的。
86- setTimeout (() => {
87- document .onmousemove = (e ) => {
88-
89- if (this .isMouseDrop ) {
90- this .isMouseMove = true ;
91- const footerChannel = this .$refs .footerChannel ;
92- let x = e .clientX - this .moveX ;
93- let y = e .clientY - this .moveY ;
94- // 限制拖动范围
95- let maxX = document .documentElement .clientWidth - 120 ;
96- let maxY = document .documentElement .clientHeight - 60 ;
97- if (this .moveX <= 0 ) {
98- maxX = document .documentElement .scrollWidth - 120 ;
99- }
100- if (this .moveY <= 0 ) {
101- maxY = document .documentElement .scrollHeight - 60 ;
102- }
103- x = Math .min (maxX, Math .max (0 , x));
104- y = Math .min (maxY, Math .max (0 , y));
105- if (e .clientX > maxX+ 120 || e .clientY > maxY+ 60 || e .clientX < 0 || e .clientY < 0 ){
106- this .oMouseUp ()
107- }
108- footerChannel .style .left = x + ' px'
109- footerChannel .style .top = y + ' px'
110- }
111- }
112- }, 0 )
86+ this .isMouseMove = false ;
87+ this .isMouseDown = true ;
11388 },
114- oMouseUp () {
115- // 清空onmousemove方法
116- document .onmousemove = null ;
117- this .isMouseDrop = false ;
118- setTimeout (() => {
119- this .isMouseMove = false ;
120- }, 200 )
121- // 恢复document的文本选中功能
122- document .onselectstart = () => {
123- return true ;
89+ onMouseMove (e ) {
90+ const footerChannel = this .$refs .footerChannel ;
91+ if (! this .isMouseDown ) return
92+ let x = e .clientX - this .positionInfo .x
93+ let y = e .clientY - this .positionInfo .y
94+ if (x > document .documentElement .clientWidth - 40 ) {
95+ x = document .documentElement .clientWidth - 40
96+ }
97+ if (y > document .documentElement .clientHeight - 160 ) {
98+ y = document .documentElement .clientHeight - 160
99+ }
100+ if (x < 20 ) {
101+ x = 20
102+ }
103+ if (y < 20 ) {
104+ y = 20
105+ }
106+ footerChannel .style .left = x + ' px'
107+ footerChannel .style .top = y + ' px'
108+ if (Math .abs (e .movementX ) > 10 || Math .abs (e .movementY ) > 10 ) {
109+ this .isMouseMove = true ;
124110 }
125111 },
126112 resetChannelPosition () {
113+ this .min = false
127114 const footerChannel = this .$refs .footerChannel ;
128115 if (footerChannel) {
129- footerChannel .style .left = document .documentElement .clientWidth - 120 + ' px'
130- footerChannel .style .top = document .documentElement .clientHeight - 60 + ' px'
116+ footerChannel .style .left = document .documentElement .clientWidth - 80 + ' px'
117+ footerChannel .style .top = document .documentElement .clientHeight - 180 + ' px'
131118 }
132119 }
133120 },
121+ beforeDestroy () {
122+ window .removeEventListener (' resize' this .resetChannelPosition )
123+ },
134124};
135125script >
136126<style src="./index.scss " lang="scss"></style >
0 commit comments