├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── dist
    ├── css
    │   ├── app.194bc40d.css
    │   └── chunk-vendors.c6d02872.css
    ├── favicon.ico
    ├── fonts
    │   ├── element-icons.535877f5.woff
    │   └── element-icons.732389de.ttf
    ├── index.html
    └── js
    │   ├── app.81664c81.js
    │   ├── app.81664c81.js.map
    │   ├── chunk-vendors.bdcbc9dd.js
    │   └── chunk-vendors.bdcbc9dd.js.map
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── example.gif
    │   ├── float-icon.png
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── HelloWorld.vue
    │   ├── floatBtn.vue
    │   └── menuPart.vue
    └── main.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 site.zhou
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-Floating-Menu
 2 | 
 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/333eb4f0-852a-40ad-a5d0-bad45d4ef3bc/deploy-status)](https://vue-floating-menu.netlify.app)
 4 | 
 5 | ## 前言
 6 | 
 7 | **正如这个名字，这是一个具有拖拽吸附功能的浮窗菜单，开源项目**
 8 | 
 9 | > 一个基于 vue 的浮窗组件,可在屏幕内自由拖拽，拖拽后可以根据最后的位置吸附到页面两边，而且可以点击浮窗显示菜单
10 | 
11 | **附上 github 项目地址** [vue-floating-menu](https://github.com/yuanzhou3118/vue-floating-menu)
12 | 
13 | **效果如下:**
14 | ![vue-floating-menu](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bba487b021194edaa368f97cd0a6ccec~tplv-k3u1fbpfcp-zoom-1.image)
15 | 
16 | ## 遇到的问题总结
17 | 
18 | - **鼠标移动过快，导致拖拽失焦：**
19 | 
20 | ```html
21 | <div @mousedown.stop.prevent="moveStart" @click.stop.prevent="toggleMenu"></div>
22 | ```
23 | 
24 | ```js
25 | moveStart(e) {
26 |   // ... ...省略号... ...
27 |   // 具体可以在github项目里查看
28 | 
29 |   document.onmousemove = async (e) => {
30 |     this.clickFlag = false;
31 |     this.moveFlags = true;
32 |     // 💥👉在这里边处理拖拽时的位置更新,就是因为这个。
33 |     // 我之前是单独通过监听mousemove的方法，所以遇到了这个问题
34 |   };
35 |   document.onmouseup = () => {
36 |     document.onmousemove = null;
37 |     document.onmouseup = null;
38 |     this.moveEnd();
39 |   };
40 | },
41 | ```
42 | 
43 | - **判断是否是点击事件：**
44 | 
45 | ```html
46 | <div @mousedown.stop.prevent="moveStart" @click.stop.prevent="toggleMenu"></div>
47 | ```
48 | 
49 | ```javascript
50 | toggleMenu() {
51 |   //  如果上一次down事件到下一次click事件中 相同即为点击事件
52 |   if (this.lastMoveIndex == this.curMoveIndex) {
53 | 	//💥点击事件
54 |   }
55 |   this.curMoveIndex = this.lastMoveIndex;
56 | },
57 | moveStart(e) {
58 |   // ... ...省略号... ...
59 |   // 具体可以在github项目里查看
60 |   document.onmousemove = async (e) => {
61 |     this.lastMoveIndex++;
62 |   };
63 |   document.onmouseup = () => {
64 |     document.onmousemove = null;
65 |     document.onmouseup = null;
66 |     this.moveEnd();
67 |   };
68 | },
69 | ```
70 | 
71 | ## Usage
72 | 
73 | Demo see here: https://vue-floating-menu.netlify.app
74 | 
75 | - **添加菜单的方式：**  
76 |   组件 src/components/menuPart.vue 是添加菜单的 demo
77 | 
78 | **如果[vue-floating-menu](https://github.com/yuanzhou3118/vue-floating-menu)觉得不错的，记得给个 ⭐ 哟**
79 | 
80 | [![Edit Vue Floating Menu Examples](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/yuanzhou3118/vue-floating-menu)
81 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/dist/css/app.194bc40d.css:
--------------------------------------------------------------------------------
1 | .zIndexTop[data-v-034c0166]{z-index:1000}.floating-window[data-v-034c0166]{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden;pointer-events:none}.floating-window .floatBtn[data-v-034c0166]{position:absolute;z-index:1000;cursor:pointer}.floating-window .floatBtn .icon[data-v-034c0166]{-webkit-user-drag:none}.floating-window .floatBtn[data-v-034c0166] .hover-area{position:absolute;width:100px;height:100%}.floating-window .floatBtn span[data-v-034c0166]:last-child{z-index:2}.floating-window .popover-content[data-v-034c0166]{width:100%!important}.floating-window .popover-content__trigger[data-v-034c0166]{width:50px;height:50px;background:#fff;display:flex;justify-content:center;align-items:center;border-radius:40px;box-shadow:0 16px 34px 0 rgba(0,49,128,.2);pointer-events:auto}.floating-popover-fade-in-out-enter-active[data-v-034c0166],.floating-popover-fade-in-out-leave-active[data-v-034c0166]{transition-timing-function:ease;transition-duration:.3s;transition-property:opacity,transform}.floating-popover-fade-in-out-enter[data-v-034c0166],.floating-popover-fade-in-out-leave-to[data-v-034c0166]{opacity:0;transform:translate3d(0,-10px,0)}.floating-popover[data-v-034c0166]{position:absolute;width:182px;padding:0!important;border:0!important;border-radius:40px!important;box-shadow:0 16px 34px 0 rgba(0,49,128,.2)}.floating-popover .popover-content__item[data-v-034c0166]{width:100%!important;height:50px;padding:0;border:0;line-height:50px;font-size:18px;color:#1890ff;display:flex;align-items:center;justify-content:center;border-radius:40px}.floating-popover .popover-content__item>img[data-v-034c0166]{margin-right:10px}*{margin:0;padding:0;box-sizing:border-box}* li{list-style:none}a{text-decoration:none}body,html{height:100%}body .select-option,html .select-option{display:none!important}#app{font-family:SourceHanSansCN-Medium,SourceHanSansCN,Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;font-size:14px;text-align:left;overflow:hidden;height:100vh;background:#1a237e}


--------------------------------------------------------------------------------
/dist/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhou3118/vue-floating-menu/8898ccffc8ddff6f1d064206d9b6046c996571b6/dist/favicon.ico


--------------------------------------------------------------------------------
/dist/fonts/element-icons.535877f5.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhou3118/vue-floating-menu/8898ccffc8ddff6f1d064206d9b6046c996571b6/dist/fonts/element-icons.535877f5.woff


--------------------------------------------------------------------------------
/dist/fonts/element-icons.732389de.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhou3118/vue-floating-menu/8898ccffc8ddff6f1d064206d9b6046c996571b6/dist/fonts/element-icons.732389de.ttf


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>new</title><link href=/css/app.194bc40d.css rel=preload as=style><link href=/css/chunk-vendors.c6d02872.css rel=preload as=style><link href=/js/app.81664c81.js rel=preload as=script><link href=/js/chunk-vendors.bdcbc9dd.js rel=preload as=script><link href=/css/chunk-vendors.c6d02872.css rel=stylesheet><link href=/css/app.194bc40d.css rel=stylesheet></head><body><noscript><strong>We're sorry but new doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.bdcbc9dd.js></script><script src=/js/app.81664c81.js></script></body></html>


--------------------------------------------------------------------------------
/dist/js/app.81664c81.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(e){for(var o,s,a=e[0],l=e[1],u=e[2],f=0,p=[];f<a.length;f++)s=a[f],Object.prototype.hasOwnProperty.call(r,s)&&r[s]&&p.push(r[s][0]),r[s]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(t[o]=l[o]);c&&c(e);while(p.length)p.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var t,e=0;e<i.length;e++){for(var n=i[e],o=!0,a=1;a<n.length;a++){var l=n[a];0!==r[l]&&(o=!1)}o&&(i.splice(e--,1),t=s(s.s=n[0]))}return t}var o={},r={app:0},i=[];function s(e){if(o[e])return o[e].exports;var n=o[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=t,s.c=o,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)s.d(n,o,function(e){return t[e]}.bind(null,o));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/";var a=window["webpackJsonp"]=window["webpackJsonp"]||[],l=a.push.bind(a);a.push=e,a=a.slice();for(var u=0;u<a.length;u++)e(a[u]);var c=l;i.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("56d7")},"0d91":function(t,e,n){},"56d7":function(t,e,n){"use strict";n.r(e);n("e260"),n("e6cf"),n("cca6"),n("a79d");var o=n("2b0e"),r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("floatBtn")],1)},i=[],s=function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("div",{ref:"page",class:{"floating-window":!0,zIndexTop:t.moveFlags},on:{mouseup:function(e){return e.stopPropagation(),e.preventDefault(),t.moveEnd(e)},mousemove:function(e){return e.stopPropagation(),e.preventDefault(),t.moving(e)}}},[o("div",{ref:"floatBtn",staticClass:"popover-content__trigger floatBtn",style:{transition:t.moveFlags?"unset":"all 300ms ease",transform:"translate3d("+t.transform.left+"px,"+t.transform.top+"px,0)"},on:{mousedown:function(e){return e.stopPropagation(),e.preventDefault(),t.moveStart(e)},mouseover:function(e){return e.stopPropagation(),e.preventDefault(),t.showButton(e)},click:function(e){return e.stopPropagation(),e.preventDefault(),t.toggleMenu(e)}}},[o("span",{staticClass:"hover-area",style:{left:t.transform.left<50?"-50px":0,width:t.moveFlags?"50px":"100px"},on:{mouseleave:function(e){return e.stopPropagation(),e.preventDefault(),t.hideButton(e)}}}),o("transition",{attrs:{name:"floating-popover-fade-in-out"}},[t.popoverShow?o("div",{staticClass:"floating-popover",style:t.menuPosition},[o("div",{staticClass:"popover-content"},[o("div",{staticClass:"popover-content__item el-button",on:{click:function(e){e.stopPropagation(),e.preventDefault(),t.handleClickMenuAction(),t.closeMenuAndFloating()}}},[o("img",{attrs:{src:n("9e49")}}),t._v("自动标准化 ")])])]):t._e()]),o("img",{staticClass:"icon",attrs:{src:n("9e49")}})],1)])},a=[],l=(n("99af"),n("96cf"),n("1da1")),u={name:"floating-window",data:function(){return{moveFlags:!1,clickFlag:!1,hoverFlag:!1,movePosition:{x:0,y:0},nx:"",ny:"",dx:"",dy:"",xPum:"",yPum:"",popoverShow:!1,transform:{top:document.body.offsetHeight-300,left:document.body.offsetWidth-25},lastMoveIndex:0,curMoveIndex:0,menuPosition:{top:0,left:0}}},created:function(){var t=this;document.addEventListener("mouseup",(function(e){(e.clientY>window.innerHeight||e.clientY<60||e.clientX<0||e.clientX>window.innerWidth)&&t.moveEnd()}))},mounted:function(){var t=this,e=this.$refs.floatBtn;document.addEventListener("click",(function(n){if(e){var o=n.target;e===o||e.contains(o)||t.closeMenuAndFloating()}}))},methods:{handleClickMenuAction:function(){this.$alert("点击菜单了","标题名称",{confirmButtonText:"确定"})},closeMenuAndFloating:function(){console.log("closeMenuAndFloating"),this.popoverShow=!1,this.hoverFlag=!1,this.moveFlags=!1,this.resetFloatBtnLocation()},toggleMenu:function(){if(this.lastMoveIndex==this.curMoveIndex&&(console.log(this.lastMoveIndex-this.curMoveIndex),console.warn("点击"),this.popoverShow=!this.popoverShow,this.popoverShow)){document.onmousemove=null;var t=this.transform,e=t.top,n=t.left;this.menuPosition.top=e>=60?"-60px":"60px",this.menuPosition.left=n>200?"-132px":0,console.log("top:".concat(e,",left:").concat(n))}this.curMoveIndex=this.lastMoveIndex},hideButton:function(){console.log("mouse-leave"),this.popoverShow||(this.hoverFlag=!1,this.moveFlags||this.resetFloatBtnLocation())},showButton:function(){if(console.log("mouse-over"),this.moveFlags)return this.hoverFlag=!1;this.hoverFlag=!0;var t=this.transform,e=t.left,n=t.top;if(!(e>0&&e<-25)){var o=document.body.clientWidth;e<o/2?this.generateTransform({top:n,left:20}):this.generateTransform({top:n,left:o-70})}},moveStart:function(t){var e=this;if(console.log("moveStart"),2!=event.button)if(this.popoverShow)this.moveFlags=!1;else{this.clickFlag=!0;var n=this.$refs.floatBtn;this.movePosition.x=t.clientX,this.movePosition.y=t.clientY;var o=this.transform,r=o.left,i=o.top;this.dx=t.clientX-r,this.dy=t.clientY-i,this.moveFlags=!0,document.onmousemove=function(){var t=Object(l["a"])(regeneratorRuntime.mark((function t(o){var r,i,s,a;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:return console.log("onmousemove"),r=document.body.clientWidth,i=document.body.clientHeight,s=i-30,a=r-n.offsetWidth/2+e.dx,e.nx=o.clientX,e.ny=o.clientY,e.xPum=(e.nx>a?a:e.nx)-e.dx,e.yPum=(e.ny>s?s:e.ny)-e.dy,t.next=11,e.$nextTick();case 11:e.lastMoveIndex++,e.generateTransform({left:e.xPum>-25?e.xPum:-25,top:e.yPum>0?e.yPum:0});case 13:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()}},generateTransform:function(t){var e=t.top,n=t.left,o=this.$refs.floatBtn;o&&(this.$set(this.transform,"left",n),this.$set(this.transform,"top",e))},moving:function(t){var e=this;return Object(l["a"])(regeneratorRuntime.mark((function n(){var o,r,i,s,a,l;return regeneratorRuntime.wrap((function(n){while(1)switch(n.prev=n.next){case 0:if(console.log("moving"),e.clickFlag=!1,!e.moveFlags){n.next=20;break}return e.hoverFlag=!1,r=e.$refs.floatBtn,o=t.touches?t.touches[0]:t,i=document.body.clientWidth,s=document.body.clientHeight,a=s-30,l=i-r.offsetWidth/2+e.dx,e.nx=o.clientX,e.ny=o.clientY,e.xPum=(e.nx>l?l:e.nx)-e.dx,e.yPum=(e.ny>a?a:e.ny)-e.dy,n.next=16,e.$nextTick();case 16:e.lastMoveIndex++,e.generateTransform({left:e.xPum>-25?e.xPum:-25,top:e.yPum>0?e.yPum:0}),t.preventDefault(),t.stopPropagation();case 20:case"end":return n.stop()}}),n)})))()},resetFloatBtnLocation:function(){console.log("------reset");var t=this.$refs.floatBtn;if(t){var e=document.body.clientWidth,n=this.transform,o=n.left,r=n.top;o<e/2?this.generateTransform({top:r,left:"-25"}):this.generateTransform({top:r,left:e-25})}},moveEnd:function(){console.log("moveEnd"),this.moveFlags=!1,this.hoverFlag||(document.onmousemove=null,this.resetFloatBtnLocation())}}},c=u,f=(n("8c76"),n("7809"),n("2877")),p=Object(f["a"])(c,s,a,!1,null,"034c0166",null),d=p.exports,m={name:"App",components:{floatBtn:d}},v=m,h=(n("5c0b"),Object(f["a"])(v,r,i,!1,null,null,null)),g=h.exports,A=n("5c96"),x=n.n(A);n("0fae");o["default"].config.productionTip=!1,o["default"].use(x.a,{size:"small"}),new o["default"]({render:function(t){return t(g)}}).$mount("#app")},"5c0b":function(t,e,n){"use strict";var o=n("9c0c"),r=n.n(o);r.a},"5df2":function(t,e,n){},7809:function(t,e,n){"use strict";var o=n("5df2"),r=n.n(o);r.a},"8c76":function(t,e,n){"use strict";var o=n("0d91"),r=n.n(o);r.a},"9c0c":function(t,e,n){},"9e49":function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAGJuT3dAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFqADAAQAAAABAAAAGAAAAACjEY07AAADZElEQVRIDY1VS0yTQRCeLa1gghE9UUqAgwePGOTCHb2YeNFoIpp4UHzQwkHRoCQkKvF1oC3gMzEKetDEk0YtBz1xksjRRBOEQMsJJWIE+li/b+n+/f9alE3+7uw3M9/OzsxuRdyjekDrYFS/MRgXbqWEhnQjAcUfo1US9xmkTJo5m+H2A1lCa63WzKHu09p40LI6qmNrHlF9Ljio67mAx4IB7Q+Ad1aW4IBus2EQhPKbo+TGtXd0yAGgfcAFNvrpgBSCMd3uAWCRM4qoHtkR0+XmiNaiJqpvIRPhQECCmbT0WHnmjPpubLgx9jpqHUrNzAKinzWnT3WqERqB+Ti+w9bBpk4pxaS99FsF52CFjM4ty0LDkP6wmpGDqM5Ht17VDOhWnCLh88neZEQl3EorI4RPlD0HJID4n2Dah8NVIcaGZKeaIV5ysARwKLmDw1w3rLel05ICEPcHpN/KYD7vsJq0oIil2LiLJ7XMn+kmx/1vgXWgk4/5Yx5pwq4gmGdb62/gtg6mKJYrsyKz811K8UPsj1kkq+PsMUYil6zyZESeY7sWu+bsqSCC+Qy28Ca/vLgbky+hCtmecll7jFNdqjkY17tXsrJ/vlNtmXcZUmQ3mVLCcFeRziyddhDZY4rCxv6lhTu+xslNu/La6axMAevGLrfpaYwpcCDeupyWKaRiEctXcDxmFPkfj7FbQdlc6qxcQVbaYPiDGOQqyKNSJr2pDjVNrNTwEDP0JS1hgLx+JHgKgsvFBIwW+qt2Q8z9lXilvkbUit3E3BMobuJrBNEkvu5klxqzBhuZmdxiDsX2QvbiSGRkPRKWFDloMnolE6mw8txit595IHFqT1+4DZru6UDyt4yj13eqnPSwsahfTcsBOL83DbdZWibaVdrtZ+V1iZPLMkzSUxHZ2qdAXRiDeMKH0b2LtAF8oqAqSN47UsDZW+M4fuX9uBxywUY0GHTGpliZX68fcad6hGueyK7KQ9ThmdsfVXnrL5fa2dNqzo27ZVu8JHa/mIzIqH073EYbkflA1UTlCGyvo0NC4EPTW1ChN7XU4zaN+fzSPXdWTf6LlE9gLoNW1dIKn2nY9trgDHGxMx9d+x9FHZwG/X65RjmTkUsg6jB4/lF2/sMI5kdJYqu0cz6yG1zjJBf+dxLa/QG90YyCvnf1IgAAAABJRU5ErkJggg=="}});
2 | //# sourceMappingURL=app.81664c81.js.map


--------------------------------------------------------------------------------
/dist/js/app.81664c81.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/App.vue?28ad","webpack:///./src/components/floatBtn.vue?a854","webpack:///src/components/floatBtn.vue","webpack:///./src/components/floatBtn.vue?11c1","webpack:///./src/components/floatBtn.vue","webpack:///src/App.vue","webpack:///./src/App.vue?1160","webpack:///./src/App.vue","webpack:///./src/main.js","webpack:///./src/App.vue?c650","webpack:///./src/components/floatBtn.vue?dd2d","webpack:///./src/components/floatBtn.vue?c5d5","webpack:///./src/assets/float-icon.png"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","_vm","this","_h","$createElement","_c","_self","attrs","staticRenderFns","ref","class","zIndexTop","moveFlags","on","$event","stopPropagation","preventDefault","moveEnd","moving","staticClass","style","transition","transform","moveStart","showButton","toggleMenu","left","width","hideButton","handleClickMenuAction","closeMenuAndFloating","_v","_e","clickFlag","hoverFlag","movePosition","nx","ny","dx","dy","xPum","yPum","popoverShow","top","document","body","offsetHeight","offsetWidth","lastMoveIndex","curMoveIndex","menuPosition","created","addEventListener","mounted","floatBtn","tDom","event","target","contains","methods","$alert","confirmButtonText","console","log","resetFloatBtnLocation","warn","onmousemove","bodyWidth","generateTransform","button","x","e","clientX","y","clientY","$set","component","components","Vue","config","productionTip","use","ElementUI","size","render","h","App","$mount"],"mappings":"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","file":"js/app.81664c81.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('floatBtn')],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"page\",class:{ 'floating-window': true, zIndexTop: _vm.moveFlags },on:{\"mouseup\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.moveEnd($event)},\"mousemove\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.moving($event)}}},[_c('div',{ref:\"floatBtn\",staticClass:\"popover-content__trigger floatBtn\",style:({\n      transition: !_vm.moveFlags ? 'all 300ms ease' : 'unset',\n      transform: (\"translate3d(\" + (_vm.transform.left) + \"px,\" + (_vm.transform.top) + \"px,0)\"),\n    }),on:{\"mousedown\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.moveStart($event)},\"mouseover\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.showButton($event)},\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.toggleMenu($event)}}},[_c('span',{staticClass:\"hover-area\",style:({\n        left: _vm.transform.left < 50 ? '-50px' : 0,\n        width: _vm.moveFlags ? '50px' : '100px',\n      }),on:{\"mouseleave\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.hideButton($event)}}}),_c('transition',{attrs:{\"name\":\"floating-popover-fade-in-out\"}},[(_vm.popoverShow)?_c('div',{staticClass:\"floating-popover\",style:(_vm.menuPosition)},[_c('div',{staticClass:\"popover-content\"},[_c('div',{staticClass:\"popover-content__item el-button\",on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();_vm.handleClickMenuAction();\n              _vm.closeMenuAndFloating();}}},[_c('img',{attrs:{\"src\":require(\"../assets/float-icon.png\")}}),_vm._v(\"自动标准化 \")])])]):_vm._e()]),_c('img',{staticClass:\"icon\",attrs:{\"src\":require(\"../assets/float-icon.png\")}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    ref=\"page\"\n    :class=\"{ 'floating-window': true, zIndexTop: moveFlags }\"\n    @mouseup.stop.prevent=\"moveEnd\"\n    @mousemove.stop.prevent=\"moving\"\n  >\n    <div\n      class=\"popover-content__trigger floatBtn\"\n      ref=\"floatBtn\"\n      :style=\"{\n        transition: !moveFlags ? 'all 300ms ease' : 'unset',\n        transform: `translate3d(${transform.left}px,${transform.top}px,0)`,\n      }\"\n      @mousedown.stop.prevent=\"moveStart\"\n      @mouseover.stop.prevent=\"showButton\"\n      @click.stop.prevent=\"toggleMenu\"\n    >\n      <span\n        @mouseleave.stop.prevent=\"hideButton\"\n        :style=\"{\n          left: transform.left < 50 ? '-50px' : 0,\n          width: moveFlags ? '50px' : '100px',\n        }\"\n        class=\"hover-area\"\n      ></span>\n      <transition name=\"floating-popover-fade-in-out\">\n        <div class=\"floating-popover\" :style=\"menuPosition\" v-if=\"popoverShow\">\n          <div class=\"popover-content\">\n            <div\n              class=\"popover-content__item el-button\"\n              @click.stop.prevent=\"\n                handleClickMenuAction();\n                closeMenuAndFloating();\n              \"\n            >\n              <img src=\"../assets/float-icon.png\" />自动标准化\n            </div>\n          </div>\n        </div>\n      </transition>\n      <img class=\"icon\" src=\"../assets/float-icon.png\" />\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  name: 'floating-window',\n  data() {\n    return {\n      moveFlags: false,\n      clickFlag: false,\n      hoverFlag: false,\n      // 初始的位置记录\n      movePosition: { x: 0, y: 0 },\n      nx: '',\n      ny: '',\n      dx: '',\n      dy: '',\n      xPum: '',\n      yPum: '',\n      popoverShow: false,\n      //浮窗的位置\n      transform: {\n        top: document.body.offsetHeight - 300,\n        left: document.body.offsetWidth - 25,\n      },\n      lastMoveIndex: 0, //  拖拽计数\n      curMoveIndex: 0, //  历史计数\n      menuPosition: {\n        top: 0,\n        left: 0,\n      },\n    };\n  },\n  created() {\n    document.addEventListener('mouseup', (e) => {\n      if (\n        e.clientY > window.innerHeight ||\n        e.clientY < 60 ||\n        e.clientX < 0 ||\n        e.clientX > window.innerWidth\n      ) {\n        this.moveEnd();\n      }\n    });\n  },\n  mounted() {\n    const floatBtn = this.$refs.floatBtn;\n    document.addEventListener('click', (event) => {\n      if (!floatBtn) return;\n      var tDom = event.target;\n      if (floatBtn !== tDom && !floatBtn.contains(tDom)) {\n        this.closeMenuAndFloating();\n      }\n    });\n  },\n  methods: {\n    handleClickMenuAction() {\n      this.$alert('点击菜单了', '标题名称', {\n        confirmButtonText: '确定',\n      });\n      return;\n    },\n    closeMenuAndFloating() {\n      console.log('closeMenuAndFloating');\n      this.popoverShow = false;\n      this.hoverFlag = false;\n      this.moveFlags = false;\n      this.resetFloatBtnLocation();\n    },\n    toggleMenu() {\n      //  如果上一次down事件到下一次click事件中 相同即为点击事件\n      if (this.lastMoveIndex == this.curMoveIndex) {\n        console.log(this.lastMoveIndex - this.curMoveIndex);\n        console.warn('点击');\n        this.popoverShow = !this.popoverShow;\n        if (this.popoverShow) {\n          document.onmousemove = null;\n          const { top, left } = this.transform;\n          if (top >= 60) {\n            this.menuPosition.top = '-60px';\n          } else {\n            this.menuPosition.top = '60px';\n          }\n          if (left > 200) {\n            this.menuPosition.left = '-132px';\n          } else {\n            this.menuPosition.left = 0;\n          }\n\n          console.log(`top:${top},left:${left}`);\n        }\n      }\n      this.curMoveIndex = this.lastMoveIndex;\n    },\n    hideButton() {\n      console.log('mouse-leave');\n      if (this.popoverShow) return;\n      this.hoverFlag = false;\n      //移动过程中不复位 按钮；\n      if (this.moveFlags) return;\n      this.resetFloatBtnLocation();\n    },\n    showButton() {\n      console.log('mouse-over');\n      if (this.moveFlags) return (this.hoverFlag = false);\n      this.hoverFlag = true;\n      const { left, top } = this.transform;\n      if (left > 0 && left < -25) return;\n      let bodyWidth = document.body.clientWidth;\n      if (left < bodyWidth / 2) {\n        this.generateTransform({ top: top, left: 20 });\n      } else {\n        this.generateTransform({ top: top, left: bodyWidth - 70 });\n      }\n    },\n    moveStart(e) {\n      console.log('moveStart');\n      if (event.button == 2) return;\n      if (this.popoverShow) {\n        this.moveFlags = false;\n        return;\n      }\n      this.clickFlag = true;\n      let floatBtn = this.$refs.floatBtn; //获取目标元素\n\n      this.movePosition.x = e.clientX;\n      this.movePosition.y = e.clientY;\n\n      //计算鼠标相对元素的位置\n      const { left, top } = this.transform;\n      this.dx = e.clientX - left;\n      this.dy = e.clientY - top;\n\n      this.moveFlags = true;\n\n      document.onmousemove = async (e) => {\n        console.log('onmousemove');\n        let bodyWidth = document.body.clientWidth;\n        let bodyHeight = document.body.clientHeight;\n        let moveMaxHeight = bodyHeight - 30;\n        let moveMaxWidth = bodyWidth - floatBtn.offsetWidth / 2 + this.dx;\n\n        this.nx = e.clientX;\n        this.ny = e.clientY;\n        this.xPum = (this.nx > moveMaxWidth ? moveMaxWidth : this.nx) - this.dx;\n        this.yPum =\n          (this.ny > moveMaxHeight ? moveMaxHeight : this.ny) - this.dy;\n        await this.$nextTick();\n        this.lastMoveIndex++;\n        this.generateTransform({\n          left: this.xPum > -25 ? this.xPum : -25,\n          top: this.yPum > 0 ? this.yPum : 0,\n        });\n      };\n    },\n    generateTransform({ top, left }) {\n      let floatBtn = this.$refs.floatBtn; //获取目标元素\n      if (!floatBtn) return;\n      this.$set(this.transform, 'left', left);\n      this.$set(this.transform, 'top', top);\n    },\n    async moving(e) {\n      console.log('moving');\n      this.clickFlag = false;\n      if (this.moveFlags) {\n        this.hoverFlag = false;\n        let touch;\n        let floatBtn = this.$refs.floatBtn; //获取目标元素\n        if (e.touches) {\n          touch = e.touches[0];\n        } else {\n          touch = e;\n        }\n        let bodyWidth = document.body.clientWidth;\n        let bodyHeight = document.body.clientHeight;\n        let moveMaxHeight = bodyHeight - 30;\n        let moveMaxWidth = bodyWidth - floatBtn.offsetWidth / 2 + this.dx;\n\n        this.nx = touch.clientX;\n        this.ny = touch.clientY;\n        this.xPum = (this.nx > moveMaxWidth ? moveMaxWidth : this.nx) - this.dx;\n        this.yPum =\n          (this.ny > moveMaxHeight ? moveMaxHeight : this.ny) - this.dy;\n        await this.$nextTick();\n        this.lastMoveIndex++;\n        this.generateTransform({\n          left: this.xPum > -25 ? this.xPum : -25,\n          top: this.yPum > 0 ? this.yPum : 0,\n        });\n\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    resetFloatBtnLocation() {\n      console.log('------reset');\n      let floatBtn = this.$refs.floatBtn; //获取目标元素\n      if (!floatBtn) return;\n      let bodyWidth = document.body.clientWidth;\n      const { left, top } = this.transform;\n      if (left < bodyWidth / 2) {\n        this.generateTransform({ top, left: `-25` });\n      } else {\n        this.generateTransform({ top, left: bodyWidth - 25 });\n      }\n    },\n    moveEnd() {\n      console.log(`moveEnd`);\n      this.moveFlags = false;\n      if (this.hoverFlag) return;\n      document.onmousemove = null;\n      this.resetFloatBtnLocation();\n    },\n  },\n};\n</script>\n<style lang=\"scss\" scoped>\n.zIndexTop {\n  z-index: 1000;\n}\n.floating-window {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  overflow: hidden;\n  pointer-events: none;\n\n  .floatBtn {\n    position: absolute;\n    z-index: 1000;\n    cursor: pointer;\n\n    .icon {\n      -webkit-user-drag: none;\n    }\n\n    /deep/ .hover-area {\n      position: absolute;\n      width: 100px;\n      height: 100%;\n    }\n\n    span:last-child {\n      z-index: 2;\n    }\n  }\n  .popover-content {\n    width: 100% !important;\n\n    &__trigger {\n      width: 50px;\n      height: 50px;\n      background: #fff;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 40px;\n      box-shadow: 0px 16px 34px 0px rgba(0, 49, 128, 0.2);\n      pointer-events: auto;\n    }\n  }\n}\n</style>\n<style lang=\"scss\" scoped>\n.floating-popover-fade-in-out {\n  &-enter-active,\n  &-leave-active {\n    transition-timing-function: ease;\n    transition-duration: 300ms;\n    transition-property: opacity, transform;\n  }\n\n  &-enter,\n  &-leave-to {\n    opacity: 0;\n    transform: translate3d(0, -10px, 0);\n  }\n}\n.floating-popover {\n  position: absolute;\n  width: 182px;\n  padding: 0 !important;\n  border: 0 !important;\n  border-radius: 40px !important;\n  box-shadow: 0px 16px 34px 0px rgba(0, 49, 128, 0.2);\n\n  .popover-content {\n    &__item {\n      width: 100% !important;\n      height: 50px;\n      padding: 0;\n      border: 0;\n      line-height: 50px;\n      font-size: 18px;\n      color: #1890ff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 40px;\n\n      > img {\n        margin-right: 10px;\n      }\n    }\n  }\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./floatBtn.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./floatBtn.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./floatBtn.vue?vue&type=template&id=034c0166&scoped=true&\"\nimport script from \"./floatBtn.vue?vue&type=script&lang=js&\"\nexport * from \"./floatBtn.vue?vue&type=script&lang=js&\"\nimport style0 from \"./floatBtn.vue?vue&type=style&index=0&id=034c0166&lang=scss&scoped=true&\"\nimport style1 from \"./floatBtn.vue?vue&type=style&index=1&id=034c0166&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"034c0166\",\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div id=\"app\">\n    <floatBtn />\n  </div>\n</template>\n\n<script>\nimport floatBtn from './components/floatBtn.vue';\n\nexport default {\n  name: 'App',\n  components: {\n    floatBtn,\n  },\n};\n</script>\n\n<style lang=\"scss\">\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  li {\n    list-style: none;\n  }\n}\na {\n  text-decoration: none;\n}\nhtml,\nbody {\n  height: 100%;\n  .select-option {\n    display: none !important;\n  }\n}\n#app {\n  font-family: 'SourceHanSansCN-Medium', 'SourceHanSansCN', 'Avenir', Helvetica,\n    Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  height: 100vh;\n  color: #2c3e50;\n  font-size: 14px;\n  text-align: left;\n  overflow: hidden;\n  height: 100vh;\n  background: #1a237e;\n}\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=6d6c4259&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import Vue from 'vue';\nimport App from './App.vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\n\nVue.config.productionTip = false;\nVue.use(ElementUI, { size: 'small' });\n\nnew Vue({\n  render: (h) => h(App),\n}).$mount('#app');\n","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./floatBtn.vue?vue&type=style&index=1&id=034c0166&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./floatBtn.vue?vue&type=style&index=1&id=034c0166&lang=scss&scoped=true&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./floatBtn.vue?vue&type=style&index=0&id=034c0166&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./floatBtn.vue?vue&type=style&index=0&id=034c0166&lang=scss&scoped=true&\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAGJuT3dAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFqADAAQAAAABAAAAGAAAAACjEY07AAADZElEQVRIDY1VS0yTQRCeLa1gghE9UUqAgwePGOTCHb2YeNFoIpp4UHzQwkHRoCQkKvF1oC3gMzEKetDEk0YtBz1xksjRRBOEQMsJJWIE+li/b+n+/f9alE3+7uw3M9/OzsxuRdyjekDrYFS/MRgXbqWEhnQjAcUfo1US9xmkTJo5m+H2A1lCa63WzKHu09p40LI6qmNrHlF9Ljio67mAx4IB7Q+Ad1aW4IBus2EQhPKbo+TGtXd0yAGgfcAFNvrpgBSCMd3uAWCRM4qoHtkR0+XmiNaiJqpvIRPhQECCmbT0WHnmjPpubLgx9jpqHUrNzAKinzWnT3WqERqB+Ti+w9bBpk4pxaS99FsF52CFjM4ty0LDkP6wmpGDqM5Ht17VDOhWnCLh88neZEQl3EorI4RPlD0HJID4n2Dah8NVIcaGZKeaIV5ysARwKLmDw1w3rLel05ICEPcHpN/KYD7vsJq0oIil2LiLJ7XMn+kmx/1vgXWgk4/5Yx5pwq4gmGdb62/gtg6mKJYrsyKz811K8UPsj1kkq+PsMUYil6zyZESeY7sWu+bsqSCC+Qy28Ca/vLgbky+hCtmecll7jFNdqjkY17tXsrJ/vlNtmXcZUmQ3mVLCcFeRziyddhDZY4rCxv6lhTu+xslNu/La6axMAevGLrfpaYwpcCDeupyWKaRiEctXcDxmFPkfj7FbQdlc6qxcQVbaYPiDGOQqyKNSJr2pDjVNrNTwEDP0JS1hgLx+JHgKgsvFBIwW+qt2Q8z9lXilvkbUit3E3BMobuJrBNEkvu5klxqzBhuZmdxiDsX2QvbiSGRkPRKWFDloMnolE6mw8txit595IHFqT1+4DZru6UDyt4yj13eqnPSwsahfTcsBOL83DbdZWibaVdrtZ+V1iZPLMkzSUxHZ2qdAXRiDeMKH0b2LtAF8oqAqSN47UsDZW+M4fuX9uBxywUY0GHTGpliZX68fcad6hGueyK7KQ9ThmdsfVXnrL5fa2dNqzo27ZVu8JHa/mIzIqH073EYbkflA1UTlCGyvo0NC4EPTW1ChN7XU4zaN+fzSPXdWTf6LlE9gLoNW1dIKn2nY9trgDHGxMx9d+x9FHZwG/X65RjmTkUsg6jB4/lF2/sMI5kdJYqu0cz6yG1zjJBf+dxLa/QG90YyCvnf1IgAAAABJRU5ErkJggg==\""],"sourceRoot":""}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "new",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "element-ui": "^2.13.2",
13 |     "node-sass": "^4.14.1",
14 |     "sass-loader": "^10.0.1",
15 |     "vue": "^2.6.11",
16 |     "vue-color": "^2.7.1"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^4.5.0",
20 |     "@vue/cli-plugin-eslint": "^4.5.0",
21 |     "@vue/cli-service": "^4.5.0",
22 |     "babel-eslint": "^10.1.0",
23 |     "eslint": "^6.7.2",
24 |     "eslint-plugin-vue": "^6.2.2",
25 |     "vue-template-compiler": "^2.6.11"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "parserOptions": {
37 |       "parser": "babel-eslint"
38 |     },
39 |     "rules": {}
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not dead"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhou3118/vue-floating-menu/8898ccffc8ddff6f1d064206d9b6046c996571b6/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="//at.alicdn.com/t/font_1734006_ryt55y0siyp.css"
11 |     />
12 |     <title><%= htmlWebpackPlugin.options.title %></title>
13 |   </head>
14 |   <body>
15 |     <noscript>
16 |       <strong
17 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
18 |         properly without JavaScript enabled. Please enable it to
19 |         continue.</strong
20 |       >
21 |     </noscript>
22 |     <div id="app"></div>
23 |     <!-- built files will be auto injected -->
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     id="app"
 4 |     :style="{
 5 |       '--themeColor': form.themeColor.hex,
 6 |       '--shadowColor': `rgba(${form.themeColor.rgba.r},${form.themeColor.rgba.g},${form.themeColor.rgba.b},0.1)`,
 7 |     }"
 8 |   >
 9 |     <floatBtn ref="floatBtn" :form="form">
10 |       <menuPart @closeMenuAndFloating="closeMenuAndFloating"></menuPart>
11 |     </floatBtn>
12 |     <img class="logo" alt="Vue logo" src="./assets/logo.svg" />
13 |     <HelloWorld :form="form" />
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import menuPart from './components/menuPart';
19 | import HelloWorld from './components/HelloWorld.vue';
20 | import floatBtn from './components/floatBtn.vue';
21 | 
22 | export default {
23 |   name: 'App',
24 |   components: {
25 |     floatBtn,
26 |     menuPart,
27 |     HelloWorld,
28 |   },
29 |   data() {
30 |     return {
31 |       form: {
32 |         themeColor: {
33 |           hsl: { h: 200, s: 0, l: 0, a: 1 },
34 |           hex: '#000000',
35 |           hex8: '#000000FF',
36 |           rgba: { r: 0, g: 0, b: 0, a: 1 },
37 |           hsv: { h: 200, s: 0, v: 0, a: 1 },
38 |           oldHue: 200,
39 |           source: 'hex',
40 |           a: 1,
41 |         },
42 |         fontSize: 28,
43 |       },
44 |     };
45 |   },
46 |   methods: {
47 |     closeMenuAndFloating() {
48 |       this.$refs.floatBtn.closeMenuAndFloating();
49 |     },
50 |   },
51 | };
52 | </script>
53 | 
54 | <style lang="scss">
55 | * {
56 |   margin: 0;
57 |   padding: 0;
58 |   box-sizing: border-box;
59 |   li {
60 |     list-style: none;
61 |   }
62 | }
63 | a {
64 |   text-decoration: none;
65 | }
66 | html,
67 | body {
68 |   height: 100%;
69 |   .select-option {
70 |     display: none !important;
71 |   }
72 | }
73 | 
74 | .logo {
75 |   width: 150px;
76 |   height: 140px;
77 |   object-fit: contain;
78 | }
79 | 
80 | #app {
81 |   font-family: 'SourceHanSansCN-Medium', 'SourceHanSansCN', 'Avenir', Helvetica,
82 |     Arial, sans-serif;
83 |   -webkit-font-smoothing: antialiased;
84 |   -moz-osx-font-smoothing: grayscale;
85 |   height: 100vh;
86 |   color: #333;
87 |   font-size: 14px;
88 |   overflow: hidden;
89 |   text-align: center;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/assets/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhou3118/vue-floating-menu/8898ccffc8ddff6f1d064206d9b6046c996571b6/src/assets/example.gif


--------------------------------------------------------------------------------
/src/assets/float-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhou3118/vue-floating-menu/8898ccffc8ddff6f1d064206d9b6046c996571b6/src/assets/float-icon.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanzhou3118/vue-floating-menu/8898ccffc8ddff6f1d064206d9b6046c996571b6/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="1 37.668212890625 126.00001525878906 52.663604736328125" width="126.00001525878906" height="52.663604736328125" xmlns="http://www.w3.org/2000/svg"><g fill="black"><path d="M126.592 58.164l-35.41-20.387a.815.815 0 0 0-.812 0L64.278 52.8 38.185 37.777a.812.812 0 0 0-.812 0L1.686 58.164c-.251.146-.686.414-.686.704v10.263c0 .291.434.56.686.704l35.549 20.388a.944.944 0 0 0 .88 0L64.243 75.2l26.109 15.023a.85.85 0 0 0 .414.108.827.827 0 0 0 .41-.108l35.413-20.388a.813.813 0 0 0 .411-.704V58.868a.815.815 0 0 0-.408-.704zM3 68.661v-8.954l33.998 19.995.004.035.607 8.799L3 68.661zm35.081 19.874L39 79.748v-.004l16.475-9.616 7.174 4.132-24.568 14.275zM64.69 73.563l-.008-.005-17.823-10.262-8.676-4.995a.8.8 0 0 0-.341-.1l.642-8.114 51.517 29.661.695 8.788L64.69 73.563zm-26.912-13.62L44.825 64l-7.047 4.057L30.732 64l7.046-4.057zm-8.674 3.119l-7.283-4.193 15.253-8.781.642 8.114a.808.808 0 0 0-.342.1l-8.27 4.76zm61.682 15.262L38.42 48.174a.814.814 0 0 0-1.276-.003l-4.688 2.7c-2.847 1.638-5.692 3.277-8.538 4.916l-2.663 1.533c-.292.168-.583.339-.877.505-.289.163-.72.562-.711.927.008.369.422.536.698.712.528.338 1.077.647 1.614.971l4.328 2.603 2.393 1.438 8.674 5.109c.126.072.266.165.405.165s.28-.008.405-.079l8.271-4.747 7.278 4.197-16.114 9.195L3.422 59.412 37.741 39.42l52.627 30.278a.806.806 0 0 0 .407.108c.14 0 .28.172.404.1l8.677-4.787 1.704-.997 3.922-2.292 1.859-1.087c.246-.144.492-.29.739-.432.312-.18.788-.375.968-.705.146-.271.161-.598.106-.894-.005-.025-.01-.051-.017-.076-.007-.023-.018-.047-.027-.07a.946.946 0 0 0-.046-.104l-.026-.037c-.017-.024-.033-.049-.052-.072l-.054-.058c-.019-.018-.037-.036-.058-.053-.022-.02-.047-.036-.071-.052-.014-.009-.024-.019-.037-.027l-17.354-9.99a.814.814 0 0 0-1.274-.003l-16.951 9.76-7.282-4.192L90.773 39.42l34.465 19.841-34.45 19.063.043.025-.045-.025zm7.035-14.325l-7.046 4.058-7.047-4.058 7.047-4.057 7.046 4.057zM90.838 58.2l.643-8.113 15.253 8.781-7.283 4.194L91.18 58.3a.8.8 0 0 0-.342-.1zm-.469.101l-8.27 4.761-7.283-4.193 15.251-8.781.644 8.113a.79.79 0 0 0-.342.1zm35.337 10.66l-34.54 19.575.539-8.799 34.001-20.057v9.281z"></path></g></svg>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>简单的浮窗菜单 DEMO</h1>
 4 |     <p>
 5 |       其实就是一个简单地浮窗菜单功能，写的过程发现还是有点东西，所以写了一个demo来分享给大家
 6 |     </p>
 7 |     <div class="container">
 8 |       <el-form ref="form" :model="form" v-if="form" label-width="120px">
 9 |         <el-form-item label="浮窗主题色">
10 |           <swatches-picker v-model="form.themeColor"></swatches-picker>
11 |         </el-form-item>
12 |         <el-form-item label="浮窗图标大小">
13 |           <el-slider v-model="form.fontSize" :min="12" :max="50"></el-slider>
14 |         </el-form-item>
15 |       </el-form>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { Swatches } from 'vue-color';
22 | export default {
23 |   name: 'HelloWorld',
24 |   props: {
25 |     form: Object,
26 |   },
27 |   components: {
28 |     'swatches-picker': Swatches,
29 |   },
30 | };
31 | </script>
32 | <style scoped lang="scss">
33 | p {
34 |   margin-top: 10px;
35 |   font-size: 18px;
36 | }
37 | 
38 | .container {
39 |   text-align: left;
40 |   width: 1000px;
41 |   margin: 30px auto;
42 | 
43 |   .el-slider {
44 |     width: 300px;
45 | 
46 |     ::v-deep .el-slider__bar {
47 |       background-color: var(--themeColor);
48 |     }
49 | 
50 |     ::v-deep .el-slider__button {
51 |       border-color: var(--themeColor);
52 |     }
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/components/floatBtn.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     ref="page"
  4 |     :class="{ 'floating-window': true, zIndexTop: moveFlags }"
  5 |     @mouseup.stop.prevent="moveEnd"
  6 |   >
  7 |     <div
  8 |       class="popover-content__trigger floatBtn"
  9 |       ref="floatBtn"
 10 |       :style="{
 11 |         transition: !moveFlags ? 'all 300ms ease' : 'unset',
 12 |         transform: `translate3d(${transform.left}px,${transform.top}px,0)`,
 13 |       }"
 14 |       @mousedown.stop.prevent="moveStart"
 15 |       @mouseover.stop.prevent="showButton"
 16 |       @click.stop.prevent="toggleMenu"
 17 |     >
 18 |       <span
 19 |         @mouseleave.stop.prevent="hideButton"
 20 |         :style="{
 21 |           left: transform.left < 50 ? '-50px' : 0,
 22 |           width: moveFlags ? '50px' : '100px',
 23 |         }"
 24 |         class="hover-area"
 25 |       ></span>
 26 |       <transition name="floating-popover-fade-in-out">
 27 |         <div
 28 |           ref="popoverContent"
 29 |           class="floating-popover"
 30 |           :style="menuPosition"
 31 |           v-if="popoverShow"
 32 |         >
 33 |           <slot>
 34 |             <div class="popover-content">
 35 |               <div
 36 |                 class="popover-content__item el-button"
 37 |                 @click.stop.prevent="
 38 |                   handleClickMenuAction();
 39 |                   closeMenuAndFloating();
 40 |                 "
 41 |               >
 42 |                 <!-- <img src="../assets/float-icon.png" />自动标准化 -->
 43 |                 <i class="iconfont iconnut icon"></i>自动标准化
 44 |               </div>
 45 |             </div>
 46 |           </slot>
 47 |         </div>
 48 |       </transition>
 49 |       <i
 50 |         :style="{ fontSize: `${form.fontSize}px` }"
 51 |         class="iconfont iconnut icon"
 52 |       ></i>
 53 |       <!-- <img class="icon" src="../assets/float-icon.png" /> -->
 54 |     </div>
 55 |   </div>
 56 | </template>
 57 | <script>
 58 | export default {
 59 |   name: 'floating-window',
 60 |   props: {
 61 |     form: Object,
 62 |   },
 63 |   data() {
 64 |     return {
 65 |       moveFlags: false,
 66 |       clickFlag: false,
 67 |       hoverFlag: false,
 68 |       // 初始的位置记录
 69 |       movePosition: { x: 0, y: 0 },
 70 |       nx: '',
 71 |       ny: '',
 72 |       dx: '',
 73 |       dy: '',
 74 |       xPum: '',
 75 |       yPum: '',
 76 |       popoverShow: false,
 77 |       //浮窗的位置
 78 |       transform: {
 79 |         top: document.body.offsetHeight - 300,
 80 |         left: document.body.offsetWidth - 25,
 81 |       },
 82 |       lastMoveIndex: 0, //  拖拽计数
 83 |       curMoveIndex: 0, //  历史计数
 84 |       menuPosition: {
 85 |         top: 0,
 86 |         left: 0,
 87 |       },
 88 |     };
 89 |   },
 90 |   created() {
 91 |     document.addEventListener('mouseup', (e) => {
 92 |       if (
 93 |         e.clientY > window.innerHeight ||
 94 |         e.clientY < 60 ||
 95 |         e.clientX < 0 ||
 96 |         e.clientX > window.innerWidth
 97 |       ) {
 98 |         this.moveEnd();
 99 |       }
100 |     });
101 |   },
102 |   mounted() {
103 |     window.addEventListener('resize', () => {
104 |       this.$set(this.transform, 'top', document.body.offsetHeight - 300);
105 |       this.$set(this.transform, 'left', document.body.offsetWidth - 25);
106 |     });
107 |     const floatBtn = this.$refs.floatBtn;
108 |     document.addEventListener('click', (event) => {
109 |       if (!floatBtn) return;
110 |       var tDom = event.target;
111 |       if (floatBtn !== tDom && !floatBtn.contains(tDom)) {
112 |         this.closeMenuAndFloating();
113 |       }
114 |     });
115 |   },
116 |   methods: {
117 |     handleClickMenuAction() {
118 |       this.$alert('点击菜单了', '标题名称', {
119 |         confirmButtonText: '确定',
120 |       });
121 |       return;
122 |     },
123 |     closeMenuAndFloating() {
124 |       console.log('closeMenuAndFloating');
125 |       this.popoverShow = false;
126 |       this.hoverFlag = false;
127 |       this.moveFlags = false;
128 |       this.resetFloatBtnLocation();
129 |     },
130 |     async toggleMenu() {
131 |       //  如果上一次down事件到下一次click事件中 相同即为点击事件
132 |       if (this.lastMoveIndex == this.curMoveIndex) {
133 |         console.log(this.lastMoveIndex - this.curMoveIndex);
134 |         console.warn('点击');
135 |         this.popoverShow = !this.popoverShow;
136 |         await this.$nextTick();
137 |         if (this.popoverShow) {
138 |           document.onmousemove = null;
139 |           const { top, left } = this.transform;
140 |           if (top >= 60) {
141 |             this.menuPosition.top = `-${this.$refs.popoverContent.offsetHeight +
142 |               10}px`;
143 |           } else {
144 |             this.menuPosition.top = '60px';
145 |           }
146 |           if (left > 200) {
147 |             this.menuPosition.left = '-132px';
148 |           } else {
149 |             this.menuPosition.left = 0;
150 |           }
151 | 
152 |           console.log(`top:${top},left:${left}`);
153 |         }
154 |       }
155 |       this.curMoveIndex = this.lastMoveIndex;
156 |     },
157 |     hideButton() {
158 |       console.log('mouse-leave');
159 |       if (this.popoverShow) return;
160 |       this.hoverFlag = false;
161 |       //移动过程中不复位 按钮；
162 |       if (this.moveFlags) return;
163 |       this.resetFloatBtnLocation();
164 |     },
165 |     showButton() {
166 |       console.log('mouse-over');
167 |       if (this.moveFlags) return (this.hoverFlag = false);
168 |       this.hoverFlag = true;
169 |       const { left, top } = this.transform;
170 |       if (left > 0 && left < -25) return;
171 |       let bodyWidth = document.body.clientWidth;
172 |       if (left < bodyWidth / 2) {
173 |         this.generateTransform({ top: top, left: 20 });
174 |       } else {
175 |         this.generateTransform({ top: top, left: bodyWidth - 70 });
176 |       }
177 |     },
178 |     moveStart(e) {
179 |       console.log('moveStart');
180 |       if (event.button == 2) return;
181 |       if (this.popoverShow) {
182 |         this.moveFlags = false;
183 |         return;
184 |       }
185 |       this.clickFlag = true;
186 |       let floatBtn = this.$refs.floatBtn; //获取目标元素
187 | 
188 |       this.movePosition.x = e.clientX;
189 |       this.movePosition.y = e.clientY;
190 | 
191 |       //计算鼠标相对元素的位置
192 |       const { left, top } = this.transform;
193 |       this.dx = e.clientX - left;
194 |       this.dy = e.clientY - top;
195 | 
196 |       this.moveFlags = true;
197 | 
198 |       document.onmousemove = async (e) => {
199 |         this.clickFlag = false;
200 |         this.moveFlags = true;
201 |         console.log('onmousemove');
202 |         let bodyWidth = document.body.clientWidth;
203 |         let bodyHeight = document.body.clientHeight;
204 |         let moveMaxHeight = bodyHeight - 30;
205 |         let moveMaxWidth = bodyWidth - floatBtn.offsetWidth / 2 + this.dx;
206 | 
207 |         this.nx = e.clientX;
208 |         this.ny = e.clientY;
209 |         this.xPum = (this.nx > moveMaxWidth ? moveMaxWidth : this.nx) - this.dx;
210 |         this.yPum =
211 |           (this.ny > moveMaxHeight ? moveMaxHeight : this.ny) - this.dy;
212 |         await this.$nextTick();
213 |         this.lastMoveIndex++;
214 |         this.generateTransform({
215 |           left: this.xPum > -25 ? this.xPum : -25,
216 |           top: this.yPum > 0 ? this.yPum : 0,
217 |         });
218 |       };
219 |       document.onmouseup = () => {
220 |         document.onmousemove = null;
221 |         document.onmouseup = null;
222 |         this.moveEnd();
223 |       };
224 |     },
225 |     generateTransform({ top, left }) {
226 |       let floatBtn = this.$refs.floatBtn; //获取目标元素
227 |       if (!floatBtn) return;
228 |       this.$set(this.transform, 'left', left);
229 |       this.$set(this.transform, 'top', top);
230 |     },
231 |     resetFloatBtnLocation() {
232 |       console.log('------reset');
233 |       let floatBtn = this.$refs.floatBtn; //获取目标元素
234 |       if (!floatBtn) return;
235 |       let bodyWidth = document.body.clientWidth;
236 |       const { left, top } = this.transform;
237 |       if (left < bodyWidth / 2) {
238 |         this.generateTransform({ top, left: `-25` });
239 |       } else {
240 |         this.generateTransform({ top, left: bodyWidth - 25 });
241 |       }
242 |     },
243 |     moveEnd() {
244 |       console.log(`moveEnd`);
245 |       this.moveFlags = false;
246 |       if (this.hoverFlag) return;
247 |       document.onmousemove = null;
248 |       this.resetFloatBtnLocation();
249 |     },
250 |   },
251 | };
252 | </script>
253 | <style lang="scss" scoped>
254 | .zIndexTop {
255 |   z-index: 1000;
256 | }
257 | .floating-window {
258 |   position: absolute;
259 |   top: 0;
260 |   left: 0;
261 |   width: 100vw;
262 |   height: 100vh;
263 |   overflow: hidden;
264 |   pointer-events: none;
265 | 
266 |   .floatBtn {
267 |     position: absolute;
268 |     z-index: 1000;
269 |     cursor: pointer;
270 | 
271 |     .icon {
272 |       color: var(--themeColor);
273 |       font-size: 24px;
274 |       -webkit-user-drag: none;
275 |     }
276 | 
277 |     /deep/ .hover-area {
278 |       position: absolute;
279 |       width: 100px;
280 |       height: 100%;
281 |     }
282 | 
283 |     span:last-child {
284 |       z-index: 2;
285 |     }
286 |   }
287 |   .popover-content {
288 |     width: 100% !important;
289 | 
290 |     &__trigger {
291 |       width: 50px;
292 |       height: 50px;
293 |       background: #fff;
294 |       display: flex;
295 |       justify-content: center;
296 |       align-items: center;
297 |       border-radius: 40px;
298 |       box-shadow: 0px 16px 34px 0px rgba(0, 49, 128, 0.2);
299 |       pointer-events: auto;
300 |     }
301 |   }
302 | }
303 | </style>
304 | <style lang="scss" scoped>
305 | .floating-popover-fade-in-out {
306 |   &-enter-active,
307 |   &-leave-active {
308 |     transition-timing-function: ease;
309 |     transition-duration: 300ms;
310 |     transition-property: opacity, transform;
311 |   }
312 | 
313 |   &-enter,
314 |   &-leave-to {
315 |     opacity: 0;
316 |     transform: translate3d(0, -10px, 0);
317 |   }
318 | }
319 | .floating-popover {
320 |   position: absolute;
321 |   /* width: 182px; */
322 |   padding: 0 !important;
323 |   border: 0 !important;
324 |   /* border-radius: 40px !important; */
325 |   /* box-shadow: 0px 16px 34px 0px rgba(0, 49, 128, 0.2); */
326 | }
327 | </style>
328 | 


--------------------------------------------------------------------------------
/src/components/menuPart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="popover-content">
  3 |     <div
  4 |       class="popover-content__item el-button"
  5 |       @click.stop.prevent="menuClick('处理中心')"
  6 |     >
  7 |       <i class="el-icon-odometer icon"></i>处理中心
  8 |     </div>
  9 |     <div
 10 |       class="popover-content__item el-button"
 11 |       @click.stop.prevent="menuClick('我的工作台')"
 12 |     >
 13 |       <i class="el-icon-user icon"></i>我的工作台
 14 |     </div>
 15 |     <div
 16 |       class="popover-content__item el-button"
 17 |       @click.stop.prevent="menuClick('资源管理')"
 18 |     >
 19 |       <i class="iconfont iconnut icon"></i>资源管理
 20 |     </div>
 21 |   </div>
 22 | </template>
 23 | <script>
 24 | export default {
 25 |   name: 'menu-part',
 26 |   props: {},
 27 |   data() {
 28 |     return {};
 29 |   },
 30 |   methods: {
 31 |     menuClick(eventName) {
 32 |       switch (eventName) {
 33 |         case '处理中心':
 34 |           //自定义菜单点击事件
 35 |           this.$alert('处理中心', '标题名称', {
 36 |             confirmButtonText: '确定',
 37 |           });
 38 |           //关闭菜单的方法
 39 |           this.$emit('closeMenuAndFloating');
 40 |           break;
 41 |         case '我的工作台':
 42 |           //自定义菜单点击事件
 43 |           this.$alert('处理中心', '标题名称', {
 44 |             confirmButtonText: '确定',
 45 |           });
 46 |           //关闭菜单的方法
 47 |           this.$emit('closeMenuAndFloating');
 48 |           break;
 49 |         case '资源管理':
 50 |           //自定义菜单点击事件
 51 |           this.$alert('处理中心', '标题名称', {
 52 |             confirmButtonText: '确定',
 53 |           });
 54 |           //关闭菜单的方法
 55 |           // this.$emit('closeMenuAndFloating');
 56 |           break;
 57 |         default:
 58 |           break;
 59 |       }
 60 |     },
 61 |   },
 62 | };
 63 | </script>
 64 | <style lang="scss" scoped>
 65 | .popover-content {
 66 |   width: 182px;
 67 |   overflow: hidden;
 68 |   border-radius: 15px;
 69 |   box-shadow: 0px 16px 34px 0px rgba(0, 49, 128, 0.2);
 70 | 
 71 |   .el-button + .el-button {
 72 |     margin-left: 0;
 73 |   }
 74 | 
 75 |   .el-button:focus,
 76 |   .el-button:hover {
 77 |     color: var(--themeColor);
 78 |   }
 79 | 
 80 |   &__item {
 81 |     width: 100% !important;
 82 |     height: 50px;
 83 |     padding: 0;
 84 |     border: 0;
 85 |     line-height: 50px;
 86 |     font-size: 18px;
 87 |     border-radius: 0;
 88 |     color: var(--themeColor);
 89 |     padding: 0 20px;
 90 |     text-align: left;
 91 | 
 92 |     &.el-button:hover {
 93 |       background: var(--shadowColor);
 94 |     }
 95 | 
 96 |     > .icon {
 97 |       margin-right: 10px;
 98 |       font-size: 18px;
 99 |     }
100 |   }
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import ElementUI from 'element-ui';
 4 | import 'element-ui/lib/theme-chalk/index.css';
 5 | 
 6 | Vue.config.productionTip = false;
 7 | Vue.use(ElementUI, { size: 'small' });
 8 | 
 9 | new Vue({
10 |   render: (h) => h(App),
11 | }).$mount('#app');
12 | 


--------------------------------------------------------------------------------