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

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

vue模塊移動(dòng)組件的實(shí)現(xiàn)示例

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

一直都想實(shí)現(xiàn)類似于五百丁中簡(jiǎn)歷填寫中模塊跟隨鼠標(biāo)移動(dòng)的組件,最近閑來(lái)無(wú)事,自己琢磨實(shí)現(xiàn)了一個(gè)差不多的組件。

vue模塊移動(dòng)組件的實(shí)現(xiàn)示例

其中每個(gè)模塊都是組件調(diào)入(項(xiàng)目經(jīng)驗(yàn)、教育經(jīng)驗(yàn)、工作經(jīng)驗(yàn)等),所以這里也用到了動(dòng)態(tài)加載組件方式。

思路:鼠標(biāo)移入模塊,顯示相應(yīng)模塊的點(diǎn)擊移動(dòng)按鈕,點(diǎn)擊A模塊移動(dòng)按鈕,此時(shí)原先A模塊所在的位置上變?yōu)橥蟿?dòng)到這里綠框模塊,同時(shí)鼠標(biāo)下懸浮著A模塊,鼠標(biāo)移動(dòng),懸浮的A模塊跟隨移動(dòng),綠框也跟隨上下移動(dòng)。

父組件

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, // 模塊的長(zhǎng)度comType: ’’, // 當(dāng)前移動(dòng)的模塊transType: ’’, // 當(dāng)前移動(dòng)的模塊coordinate: { // 鼠標(biāo)坐標(biāo) mouseX: 0, mouseY: 0,},downFlag: false, // 當(dāng)前是否點(diǎn)擊模塊移動(dòng)mouseYBefore: 0, // 記錄鼠標(biāo)點(diǎn)擊時(shí)Y坐標(biāo)以及鼠標(biāo)每移動(dòng)30后重新記錄鼠標(biāo)Y坐標(biāo)mouseYLast: 0, // 實(shí)時(shí)記錄鼠標(biāo)移動(dòng)時(shí)的Y坐標(biāo)nowCom: ’’, // 移動(dòng)模塊時(shí),上一個(gè)模塊或者下一個(gè)模塊的名稱forFlage: false, // forEach遍歷結(jié)束的標(biāo)識(shí)comRoute: [], // 動(dòng)態(tài)加載組件列表transCom: null, // 點(diǎn)擊后懸浮的組件compBox: null, // 獲取當(dāng)前組件在頁(yè)面中的位置信息

3、scrollTop為頁(yè)面滾動(dòng)的距頂部的距離,從父組件傳過來(lái)

props: { scrollTop: Number,}

4、watch一些屬性

watch: { comList: { handler(val) { this.getCom(val); // 模塊列表改變時(shí),實(shí)時(shí)加載組件 }, deep: true, immediate: true, // 聲明了之后會(huì)立馬執(zhí)行handler里面的函數(shù) }, transType(val) { // 懸浮模塊加載組件 if (val) { this.transCom = () => import(`./default/${val}`); } }, scrollTop: { // 監(jiān)聽頁(yè)面滾動(dòng) 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) { // 鼠標(biāo)已經(jīng)點(diǎn)擊 const nowThis = this; document.onmousemove = function (e) { if (newVal) { // 鼠標(biāo)移動(dòng)賦值 nowThis.coordinate.mouseX = e.clientX; nowThis.coordinate.mouseY = e.clientY; } }; document.onmouseup = function () { // 鼠標(biāo)松開 document.onmousemove = null; if (newVal) { nowThis.transType = ’’; // 懸浮組件置空 nowThis.comList.forEach((item, index) => { if (item === ’moveBox’) { // 尋找moveBox所在位置 nowThis.comList[index] = nowThis.comType; // 還原成點(diǎn)擊組件 } }); 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) { // 鼠標(biāo)移動(dòng)Y坐標(biāo) this.forFlage = false; if (newVal - this.mouseYBefore > 30) { // 移動(dòng)30鼠標(biāo)向下移,每移動(dòng)30,moveBox移動(dòng)一次 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) { // 鼠標(biāo)向上移 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]數(shù)組中采用這種方式賦值,vue是不能檢測(cè)到數(shù)組的變動(dòng)的 this.$set(this.comList, index - 1, ’moveBox’); this.$set(this.comList, index, this.nowCom); this.mouseYBefore = newVal; this.forFlage = true; } }); } },},

其中 forFlage的作用是,在forEach中不能使用break這樣來(lái)結(jié)束循環(huán),所以用forFlage來(lái)表示,當(dāng)遍歷到moveBox后, 就結(jié)束遍歷

5、methods

methods: { getCom(val) { this.comRoute = []; val.forEach((item) => { this.comRoute.push(() => import(`./default/${item}`)); }); }, getData(data, dataY, dataX) { // 模塊組件點(diǎn)擊后,父組件中調(diào)用此方法,并傳值過來(lái) this.comType = data; this.transType = data; // 目前考慮點(diǎn)擊后立即移動(dòng),點(diǎn)擊不移動(dòng)的情況后期再考慮 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> 教育經(jīng)驗(yàn)</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); }, },};

到此這篇關(guān)于vue模塊移動(dòng)組件的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue模塊移動(dòng)組件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 淄博不锈钢无缝管,淄博不锈钢管-鑫门物资有限公司 | 语料库-提供经典范文,文案句子,常用文书,您的写作得力助手 | 安徽华耐泵阀有限公司-官方网站 安德建奇火花机-阿奇夏米尔慢走丝|高维|发那科-北京杰森柏汇 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 深圳办公室装修,办公楼/写字楼装修设计,一级资质 - ADD写艺 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | 微信小程序定制,广州app公众号商城网站开发公司-广东锋火 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 温室大棚建设|水肥一体化|物联网系统 | LHH药品稳定性试验箱-BPS系列恒温恒湿箱-意大利超低温冰箱-上海一恒科学仪器有限公司 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 生物风-销售载体,基因,质粒,ATCC细胞,ATCC菌株等,欢迎购买-百风生物 | 糖衣机,除尘式糖衣机,全自动糖衣机,泰州市长江制药机械有限公司 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 智能风向风速仪,风速告警仪,数字温湿仪,综合气象仪(气象五要素)-上海风云气象仪器有限公司 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 呼末二氧化碳|ETCO2模块采样管_气体干燥管_气体过滤器-湖南纳雄医疗器械有限公司 | 反渗透阻垢剂-缓蚀阻垢剂厂家-循环水处理药剂-山东鲁东环保科技有限公司 | 船用锚链|专业锚链生产厂家|安徽亚太锚链制造有限公司 | 升降炉_真空气氛炉_管式电阻炉厂家-山东中辰电炉有限公司 | 苏州防水公司_厂房屋面外墙防水_地下室卫生间防水堵漏-苏州伊诺尔防水工程有限公司 | 小型气象站_便携式自动气象站_校园气象站-竞道气象设备网 | 微妙网,专业的动画师、特效师、CG模型设计师网站! - wmiao.com 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 丹佛斯变频器-丹佛斯压力开关-变送器-广州市风华机电设备有限公司 | 全自动包装机_灌装机生产厂家-迈驰包装设备有限公司 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 流水线电子称-钰恒-上下限报警电子秤-上海宿衡实业有限公司 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 网站建设-临朐爱采购-抖音运营-山东兆通网络科技 | 艺术生文化课培训|艺术生文化课辅导冲刺-济南启迪学校 | 北京办公室装修,办公室设计,写字楼装修-北京金视觉装饰工程公司 北京成考网-北京成人高考网 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 | 博莱特空压机|博莱特-阿特拉斯独资空压机品牌核心代理商 | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | 包装机_厂家_价格-山东包装机有限公司 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 暖气片十大品牌厂家_铜铝复合暖气片厂家_暖气片什么牌子好_欣鑫达散热器 | 非甲烷总烃分析仪|环控百科| 高防护蠕动泵-多通道灌装系统-高防护蠕动泵-www.bjhuiyufluid.com慧宇伟业(北京)流体设备有限公司 |