电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue模塊移動組件的實現示例

瀏覽:19日期:2023-01-19 17:03:13

一直都想實現類似于五百丁中簡歷填寫中模塊跟隨鼠標移動的組件,最近閑來無事,自己琢磨實現了一個差不多的組件。

vue模塊移動組件的實現示例

其中每個模塊都是組件調入(項目經驗、教育經驗、工作經驗等),所以這里也用到了動態加載組件方式。

思路:鼠標移入模塊,顯示相應模塊的點擊移動按鈕,點擊A模塊移動按鈕,此時原先A模塊所在的位置上變為拖動到這里綠框模塊,同時鼠標下懸浮著A模塊,鼠標移動,懸浮的A模塊跟隨移動,綠框也跟隨上下移動。

父組件

1、父組件template中的代碼

<div ref='compBox'> <component v-for='(item, index) in comRoute' :is='item' :key='index' @getData='getData'></component> <div : ref='translateBox' v-if='transType'> <component :is='transCom'></component> </div></div>

2、data中定義的屬性

comList: [’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為頁面滾動的距頂部的距離,從父組件傳過來

props: { scrollTop: Number,}

4、watch一些屬性

watch: { comList: { handler(val) { this.getCom(val); // 模塊列表改變時,實時加載組件 }, deep: true, immediate: true, // 聲明了之后會立馬執行handler里面的函數 }, transType(val) { // 懸浮模塊加載組件 if (val) { this.transCom = () => import(`./default/${val}`); } }, scrollTop: { // 監聽頁面滾動 handler() {}, immediate: true, }, comType(newVal) { if (newVal) { this.comList.forEach((item, index) => { if (item === newVal) { this.comList[index] = ’moveBox’; // 將組建列表中為comType的元素改為moveBox組件 } }); this.getCom(this.comList); } }, downFlag(newVal) { // 鼠標已經點擊 const nowThis = this; document.onmousemove = function (e) { if (newVal) { // 鼠標移動賦值 nowThis.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 < this.comLen - 1 && !this.forFlage) { this.nowCom = this.comList[index + 1]; this.$set(this.comList, index + 1, ’moveBox’); this.$set(this.comList, index, this.nowCom); this.mouseYBefore = newVal; this.forFlage = true; } }); } else if (newVal - this.mouseYBefore < -30) { // 鼠標向上移 this.comList.forEach((item, 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

methods: { getCom(val) { this.comRoute = []; val.forEach((item) => { this.comRoute.push(() => import(`./default/${item}`)); }); }, getData(data, dataY, dataX) { // 模塊組件點擊后,父組件中調用此方法,并傳值過來 this.comType = data; this.transType = data; // 目前考慮點擊后立即移動,點擊不移動的情況后期再考慮 this.downFlag = true; this.mouseYBefore = dataY; this.$nextTick(() => { this.$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

mounted() { this.comLen = this.comList.length; this.compBox = this.$refs.compBox.getBoundingClientRect(); const that = this; window.onresize = () => (() => { that.compBox = this.$refs.compBox.getBoundingClientRect(); })();},

子組件

1、子組件template代碼

<div class='pad-box hover-box name-box'> <p class='absolute-box'> <i @mousedown='mouseDown'></i> <i class='el-icon-circle-plus operation-icon'></i> <i class='el-icon-s-tools operation-icon'></i> </p> 教育經驗</div>

2、script

export default { name: ’educationExp’, data() { return { comType: ’educationExp’, mouseYBefore: 0, mouseXBefore: 0, }; }, methods: { mouseDown(e) { this.mouseYBefore = e.clientY; this.mouseXBefore = e.clientX; this.$emit(’getData’, this.comType, this.mouseYBefore, this.mouseXBefore); }, },};

到此這篇關于vue模塊移動組件的實現示例的文章就介紹到這了,更多相關vue模塊移動組件內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 数显恒温培养摇床-卧式/台式恒温培养摇床|朗越仪器 | 国资灵活用工平台_全国灵活用工平台前十名-灵活用工结算小帮手 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) | 美能达分光测色仪_爱色丽分光测色仪-苏州方特电子科技有限公司 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 空气能暖气片,暖气片厂家,山东暖气片,临沂暖气片-临沂永超暖通设备有限公司 | 外贸网站建设-外贸网站设计制作开发公司-外贸独立站建设【企术】 | 莱州网络公司|莱州网站建设|莱州网站优化|莱州阿里巴巴-莱州唯佳网络科技有限公司 | 深圳宣传片制作-企业宣传视频制作-产品视频拍摄-产品动画制作-短视频拍摄制作公司 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 石英陶瓷,石英坩埚,二氧化硅陶瓷-淄博百特高新材料有限公司 | 步入式高低温测试箱|海向仪器| 西安展台设计搭建_西安活动策划公司_西安会议会场布置_西安展厅设计西安旭阳展览展示 | 智能垃圾箱|垃圾房|垃圾分类亭|垃圾分类箱专业生产厂家定做-宿迁市传宇环保设备有限公司 | ?水马注水围挡_塑料注水围挡_防撞桶-常州瑞轩水马注水围挡有限公司 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 高铝矾土熟料_细粉_骨料_消失模_铸造用铝矾土_铝酸钙粉—嵩峰厂家 | 海德莱电力(HYDELEY)-无功补偿元器件生产厂家-二十年专业从事电力电容器 | 包装机_厂家_价格-山东包装机有限公司 | 污水处理设备,一体化泵站,一体化净水设备-「梦之洁环保设备厂家」 | 专业深孔加工_东莞深孔钻加工_东莞深孔钻_东莞深孔加工_模具深孔钻加工厂-东莞市超耀实业有限公司 | 口臭的治疗方法,口臭怎么办,怎么除口臭,口臭的原因-口臭治疗网 | AGV叉车|无人叉车|AGV智能叉车|AGV搬运车-江西丹巴赫机器人股份有限公司 | ?水马注水围挡_塑料注水围挡_防撞桶-常州瑞轩水马注水围挡有限公司 | 洗瓶机厂家-酒瓶玻璃瓶冲瓶机-瓶子烘干机-封口旋盖压盖打塞机_青州惠联灌装机械 | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | 浙江宝泉阀门有限公司 | 氧氮氢联合测定仪-联测仪-氧氮氢元素分析仪-江苏品彦光电 | 电动球阀_不锈钢电动球阀_电动三通球阀_电动调节球阀_上海湖泉阀门有限公司 | 重庆监控_电子围栏设备安装公司_门禁停车场管理系统-劲浪科技公司 | 耳模扫描仪-定制耳机设计软件-DLP打印机-asiga打印机-fitshape「飞特西普」 | 数控走心机-走心机价格-双主轴走心机-宝宇百科 | 食品级焦亚硫酸钠_工业级焦亚硫酸钠_焦亚硫酸钠-潍坊邦华化工有限公司 | 四川成都干燥设备_回转筒干燥机_脉冲除尘器_输送设备_热风炉_成都川工星科机电设备有限公司 | 北京网络营销推广_百度SEO搜索引擎优化公司_网站排名优化_谷歌SEO - 北京卓立海创信息技术有限公司 | 语料库-提供经典范文,文案句子,常用文书,您的写作得力助手 | 分子精馏/精馏设备生产厂家-分子蒸馏工艺实验-新诺舜尧(天津)化工设备有限公司 | 雄松华章(广州华章MBA)官网-专注MBA/MPA/MPAcc/MEM辅导培训 | PSI渗透压仪,TPS酸度计,美国CHAI PCR仪,渗透压仪厂家_价格,微生物快速检测仪-华泰和合(北京)商贸有限公司 |