2.属性定义indata[JavaScript]plaintextview_copycode_?01020304050607080910111213141516comList:[`'educationExp',``'workExp','projectExp'`],//模块列表comLen:0,//模块的长度comType:''`,//当前移动模块`transType:''`,//当前移动模块`coordinate:{//鼠标坐标mouseX:0,mouseY:0,},downFlag:false`,//当前是否点击模块移动`mouseYBefore:0,//记录鼠标点击时的Y坐标，每移动30次鼠标重新记录鼠标Y坐标mouseYLast:0,//记录Y坐标鼠标实时移动时的坐标nowCom:''`,//移动模块时，上一个或下一个模块的名称`forFlage:false`,//forEach遍历结束标志`comRoute:[],//动态加载组件列表transCom:null`,//点击后悬停组件`compBox:null`,//获取当前组件在页面中的位置信息`3,scrollTop为距离顶部的距离页面滚动的，来自父组件传过来[JavaScript]纯文本查看_复制代码_?1props:{?scrollTop:Number,}4、watch一些属性[JavaScript]纯文本查看_复制代码_?0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586watch:{comList:{handler(val){this`.getCom(val);//Whenthemodulelistchanges,loadthecomponentinrealtime`},deep:true`,`immediate:true`,//Thefunctioninthehandlerwillbeexecutedimmediatelyafterdeclaration`},transType(val){//Suspensionmoduleloadingcomponentif(val){this`.transCom=()=>import(./default/${val});`}},scrollTop:{//Monitorpagescrollinghandler(){},immediate:true`,`},comType(newVal){if(newVal){this`.comList.forEach((item,index)=>{`if(item===newVal){this`.comList[index]='moveBox'`;//changethecomTypeelementinthecomponentlisttomoveBoxcomponent}});this`.getCom(this.comList);`}},downFlag(newVal){//themousehasclickedconstnowThis=this`;`document.onmousemove=function(e){if(newVal){//mousemovementassignmentnowThis.coordinate.mouseX=e.clientX;nowThis.coordinate.mouseY=e.clientY;}};document.onmouseup=function(){//鼠标松开document.onmousemove=null`;`if(newVal){nowThis.transType=''`;//悬浮组件为空`nowThis.comList.forEach((item,index)=>{if(item==='moveBox'`){//找到moveBox的位置`nowThis.comList[index]=nowThis.comType;//还原为点击组件}});nowThis.downFlag=false`;`nowThis.comType=''`;`nowThis.getCom(nowThis.comList);}};},coordinate:{handler(newVal){//浮动组件的位置this`.$refs.translateBox.style.top=${newVal.mouseY+`this.scrollTop-40-this`.compBox.y}px`;this`.$refs.translateBox.style.left=${newVal.mouseX-`this`.compBox.x-200}px;`this`.mouseYLast=newVal.mouseY;`},deep:true`,`},mouseYLast(newVal){//鼠标Y坐标this`.forFlage=false`;if(newVal-this`.mouseYBefore>30){//移动30并向下移动鼠标，每移动30次，moveBox移动一次`this`.comList.forEach((item,index)=>{`if(item==='moveBox'&&index{`if(item==='moveBox'&&index>0&&!`this`.forFlage){this`.nowCom=this`.comList[index-1];//this.comList[index-1]='moveBox';//this.comList[index]=this.nowCom;//this.comList[index]数组是这样赋值的,vue无法检测数组this`.$set(this.comList,index-1,'moveBox'`);this`.$set(this.comList,index,this`.nowCom);this`.mouseYBefore=newVal;`this`.forFlage=true`;}});}},}，forFlage的作用是不能在forEach中用break结束循环，所以用forFlage来表示，当遍历到moveBox之后,结束遍历5.methods[JavaScript]plaintextview_copycode_?010203040506070809101112131415161718methods:{getCom(val){this`.comRoute=[];`val.forEach((item)=>{this`.comRoute.push(()=>导入(./default/${item}));`});},getData(data,dataY,dataX){//点击模块组件后，在父组件中调用该方法，并将值传给this`.comType=data;`this`.trans类型=数据；//目前考虑点击后立即移动，考虑`this`.downFlag=true`;this`.mouseYBefore=dataY;`this`.$nextTick(()=>{`laterthis`.$refs.translateBox.style.top=${dataY+`this.scrollTop-40-this`.compBox.y}px`;this`.$refs.translateBox.style.left=${dataX-`this`.compBox.x-200}px;`});},},6,mounted[JavaScript]纯文本view_copycode_?12345678mounted(){this`.comLen=this`.comList.length;this`.compBox=this`。$refs.compBox.getBoundingClientRect();constthat=this`;`window.onresize=()=>(()=>{that.compBox=this`.$refs.compBox.getBoundingClientRect();`})();},子组件1,子组件模板代码[JavaScript]纯文本view_copycode_?12345678`

教育经验