vue 모듈 모 바 일 구성 요소 의 구현 예제

500 정 중 이력서 작성 중 모듈 이 마 우 스 를 따라 이동 하 는 것 과 같은 구성 요 소 를 실현 하고 싶 었 습 니 다.최근 에는 일이 없어 서 차이 가 많 지 않 은 구성 요 소 를 만 들 었 습 니 다.

그 중에서 모든 모듈 은 구성 요소 호출(프로젝트 경험,교육 경험,업무 경험 등)이기 때문에 여기 서도 동적 로드 구성 요소 방식 을 사용 했다.
사고방식:마 우 스 를 모듈 로 옮 겨 서 해당 모듈 의 클릭 이동 단 추 를 표시 하고 A 모듈 이동 단 추 를 클릭 합 니 다.이때 원래 A 모듈 이 있 던 위치 가 여기 녹색 상자 모듈 로 드래그 되 고 마우스 아래 에 A 모듈 이 떠 있 습 니 다.마우스 가 이동 하고 떠 있 는 A 모듈 이 따라 이동 하 며 녹색 상자 도 위아래 로 이동 합 니 다.
부모 구성 요소
1.부모 구성 요소 template 의 코드

<div class="component-box" ref="compBox">
 <component
   v-for="(item, index) in comRoute"
   :is="item"
   :key="index"
   @getData="getData">
</component>
 <div :class="['translate-box', {'move-icon':transType}]"
    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 class="el-icon-rank operation-icon move-icon"    @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 모듈 모 바 일 구성 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!