真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何實(shí)現(xiàn)vue模塊移動(dòng)組件

小編這次要給大家分享的是如何實(shí)現(xiàn)vue模塊移動(dòng)組件,文章內(nèi)容豐富,感興趣的小伙伴可以來(lái)了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、長(zhǎng)興網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為長(zhǎng)興等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

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

如何實(shí)現(xiàn)vue模塊移動(dòng)組件

其中每個(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中的代碼

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)的距頂部的距離,從父組件傳過(guò)來(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)聽(tīng)頁(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)松開(kāi)
   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)用此方法,并傳值過(guò)來(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代碼

教育經(jīng)驗(yàn)

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)于如何實(shí)現(xiàn)vue模塊移動(dòng)組件的文章,如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話,可以把它分享出去給更多人看到。


網(wǎng)頁(yè)題目:如何實(shí)現(xiàn)vue模塊移動(dòng)組件
分享鏈接:http://weahome.cn/article/pieoeo.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部