vue 는 클릭 하여 팝 업 상 자 를 조작 하 는 예 시 를 실현 합 니 다.

위의 그림 에서 보 듯 이 이번 에는 클릭 하여 조작 탄 상자 가 나타 나 는 효 과 를 실현 해 야 한다.그리고 이 기능 을 하나의 함수 로 봉 하여 프로젝트 의 여러 곳 에서 사용 하기에 편리 하 다.
구체 적 인 사고방식 은:
구성 요 소 를 패키지 합 니 다.구성 요 소 는 슬롯 을 보호 합 니 다.우 리 는 서로 다른 장면 에 따라 슬롯 을 이용 하여 이 탄창 에 모든 요 소 를 임의로 삽입 할 수 있 습 니 다.이 탄창 은 내 마우스 의 클릭 위치 에 따라 탄창 의 위 치 를 정 하고 구성 요소 에서 마우스 로 이 벤트 를 들 어 올 리 는 것 을 감청 하여 이 벤트 를 촉발 할 때 탄창 을 숨 길 수 있 습 니 다.
이 어 함수 에서 createElement 와 appendChild 방법 으로 팝 업 상 자 를 만 들 고 페이지 에 삽입 합 니 다.
　  이번 구현 vuecli 3 기반
다음은 구체 적 으로 실현 한다.
     우선 데모 구성 요 소 를 작성 하 겠 습 니 다.
　  팝 업 상자 가 나타 나 는 요 소 를 누 르 면 이벤트 대상 데 이 터 를 전달 하여 클릭 할 때 마우스 의 데 이 터 를 가 져 와 팝 업 상자 의 위 치 를 확인 합 니 다.

//       ： src > views > demo> index.vue
<template>
 <div class="demo-wrapper">
  <div class="demo-div">
   <span>    </span>
   <i class="xk-icon xk-ellipsis" @click.stop='showMenu($event)'></i> //         ，             
  </div>
 </div>
</template>

<script lang="ts">
 import { Vue, Component, Prop, Watch} from "vue-property-decorator";
 @Component({

 })
 export default class articleView extends Vue {
  showMenu($event:any){
   //         
  }
 };
</script>

     이어서 팝 업 상자 안의 구성 요소 도 적어 봅 시다.
     구성 요 소 는 ActionList 라 고 부 릅 니 다.구성 요 소 는 목록 데이터 와 클릭 이 벤트 를 부모 구성 요소 가 전달 하 는 값 에 따라 정 합 니 다.작은 demo 이기 때문에 우리 가 전달 하 는 menu 데이터 배열 은 간단 한 문자열 배열 일 뿐 입 니 다.

//       ： src > components > ActionList > index.vue<template>
 <ul class="menu-wrapper">
  <li
   class="menu-item"
   v-for="item in menu"
   :key="item"
   @click="handleClick(item)"
  >
   {{ item }}
  </li>
 </ul>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class ActionList extends Vue {
 @Prop() menu: string[];
 handleClick(str: string) {
  this.$emit('click', str);
 }
}
</script>

    이 어 손 으로 탄 상자 구성 요 소 를 시작 했다.
1.탄 상자 구성 요소 의 디 스 플레이 숨 김 은 v-show 로 제어 합 니 다.왜 v-if 를 사용 하지 않 습 니까?여기 서 저 는 mouseup 사건 을 감청 하여 탄 상 자 를 숨 겼 습 니 다.만약 에 슬롯 에 있 는 요소 바 인 딩 사건,예 를 들 어 이벤트 클릭,v-if 를 사용 하면 슬롯 에 있 는 요 소 를 클릭 할 때 탄 상자 가 먼저 사라 지고 슬롯 에 있 는 클릭 사건 이 효력 이 발생 하지 않 습 니 다.
     2.handle Open 이벤트 에서 우 리 는 마우스 클릭 위치 에 따라 탄 상자 의 위 치 를 찾 습 니 다.

//       ： src > components > PublicModel > index.vue<template>
 <div class="dropdown-menu" :style="style" v-show='showModel'>
  <slot></slot>
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
interface IStyle {
 left?: string;
 right?: string;
 top?: string;
 bottom?: string;
}
@Component
export default class PublicModel extends Vue {
 showModel:boolean = false;
 style:IStyle = {};

 //      
 handleOpen($event:any){
  const { clientWidth, clientHeight, scrollWidth, scrollHeight } = document.body || document.documentElement;
  const { pageX, pageY, clientX, clientY } = $event;
  let style:IStyle = {} 
  if(clientX > (clientWidth * 2)/3 ){
   style.right = scrollWidth - pageX + 10 + 'px';
  }else{
   style.left = pageX+10+'px'
  }
  if(clientY > (clientHeight * 2) / 3 ){
   style.bottom = scrollHeight - pageY + 10 + 'px';
  }else{
   style.top = pageY + 10 + "px"
  }
  this.style = style;
  this.showModel = true;
  document.addEventListener('mouseup',this.closeModel)
 }

 //        
 closeModel(){
  this.showModel = false;
  document.removeEventListener('mouseup', this.closeModel);
 }

 //         
 destroyed(){
  document.removeEventListener('mouseup', this.closeModel);
 }
}
</script>

    이어서 중점 을 두 고 공용 패 키 징 함 수 를 썼 다.
demo 구성 요소 가 클릭 할 때 이 함 수 를 터치 합 니 다.즉,demo 구성 요소 에 있 는 showMenu 이벤트 트리거 함수 입 니 다.이 함 수 는 createElement 와 appendChild 방법 으로 팝 업 상 자 를 만 들 고 페이지 에 삽입 해 야 합 니 다.
클릭 할 때 요 소 를 만 들 고 삽입 하기 때문에 성능 최 적 화 를 위해 악의 적 으로 미 친 클릭 을 피하 고 요 소 를 계속 만 들 고 삽입 합 니 다.저 희 는 throttle-debounce 플러그 인 을 이용 하여 절 류 를 합 니 다.
먼저 코드 를 직접 보고 다른 주석 은 코드 에 적 혀 있 습 니 다.함수 이름 은 마음대로 가 져 옵 니 다:ModelFun

//       ： src > components > PublicModel > index.ts
import Vue from 'vue';
import PublicModel from './index.vue'; //            
const throttleDebounce = require('throttle-debounce'); // throttle-debounce  
const debounce = throttleDebounce.debounce;
const PublicModelConstructor = Vue.extend(PublicModel);
let instance:any;
const initInstance = () => {
 instance = new PublicModelConstructor({
  el: document.createElement('div'),
 });
 document.body.appendChild(instance.$el);
}
const insertInstanceSlot = (slotVNode:any, $event:any) => { //                  ，           （        ）
 if(!instance){
  initInstance()
 }
 instance.$slots.default = [slotVNode]; //                  
 instance.handleOpen($event) //       （      ）               
}
const ModelFun = debounce(200, false, insertInstanceSlot) //   throttle-debounce  debounce                    ，   200                 //       false ，      200      callback（ insertInstanceSlot），  true ，        ；
export default ModelFun

    이어서 중점 을 두 고 공용 패 키 징 함 수 를 썼 다.
demo 구성 요소 가 클릭 할 때 이 함 수 를 터치 합 니 다.즉,demo 구성 요소 에 있 는 showMenu 이벤트 트리거 함수 입 니 다.이 함 수 는 createElement 와 appendChild 방법 으로 팝 업 상 자 를 만 들 고 페이지 에 삽입 해 야 합 니 다.
클릭 할 때 요 소 를 만 들 고 삽입 하기 때문에 성능 최 적 화 를 위해 악의 적 으로 미 친 클릭 을 피하 고 요 소 를 계속 만 들 고 삽입 합 니 다.저 희 는 throttle-debounce 플러그 인 을 이용 하여 절 류 를 합 니 다.
먼저 코드 를 직접 보고 다른 주석 은 코드 에 적 혀 있 습 니 다.함수 이름 은 마음대로 가 져 옵 니 다:ModelFun

//       ： src > components > PublicModel > index.tsimport Vue from 'vue';
import PublicModel from './index.vue'; //            
const throttleDebounce = require('throttle-debounce'); // throttle-debounce  
const debounce = throttleDebounce.debounce;
const PublicModelConstructor = Vue.extend(PublicModel);
let instance:any;
const initInstance = () => {
 instance = new PublicModelConstructor({
  el: document.createElement('div'),
 });
 document.body.appendChild(instance.$el);
}
const insertInstanceSlot = (slotVNode:any, $event:any) => { //                  ，           （        ）
 if(!instance){
  initInstance()
 }
 instance.$slots.default = [slotVNode]; //                  
 instance.handleOpen($event) //       （      ）               
}
const ModelFun = debounce(200, false, insertInstanceSlot) //   throttle-debounce  debounce                    ，   200                 //       false ，      200      callback（ insertInstanceSlot），  true ，        ；export default ModelFun

    마지막 으로,우 리 는 고 개 를 돌려 데모 구성 요 소 를 보완 합 시다.
     vue 의 를 이용 하 다 $createElement 는 ActionList 구성 요 소 를 탄 상자 에 삽입 하고 데이터 와 이 벤트 를 ActionList 구성 요소 에 전달 합 니 다.여기 서 우리 가 전달 하 는 이 벤트 는 우리 가 클릭 한 데 이 터 를 간단하게 팝 업 합 니 다.

//       ： src > views > demo> index.vue<template>
 <div class="demo-wrapper">
  <div class="demo-div">
   <span>    </span>
   <i class="xk-icon xk-ellipsis" @click.stop='showMenu($event)'></i>
  </div>
 </div>
</template>

<script lang="ts">
 import { Vue, Component, Prop, Watch} from "vue-property-decorator";
 import ActionList from "@/components/ActionList/index.vue";
 import modelFun from "@/components/PublicModel/index";
 @Component({

 })
 export default class articleView extends Vue {
  menuList: string[] = ['  1','  2','  3'];
  menuClick(name:string){ //           
   this.$message({message:name,type:'success'})
  }
  showMenu($event:any){
   modelFun(
    this.$createElement(
     ActionList,
     {
      props: { menu:this.menuList },
      on:{
       click: this.menuClick,
      }
     }
    ),
    $event
   )
  }
 };
</script>

  이로써 효 과 는 다음 과 같다.

마지막 으로,우 리 는 element ui 의 tree 구성 요 소 를 이용 하여 우리 가 봉 인 된 탄 틀 과 결합 하여 효 과 를 보 았 다.
코드:

<template>
 <div class="demo-wrapper">
  <el-tree
    :data="data"
   node-key="id"
    :default-expand-all="true"
   :expand-on-click-node="false"
   show-checkbox
   >
    <div class="custom-tree-node tree-item" iv slot-scope="{ node }">
     <span>{{ node.label }}</span>
     <span
      class="action"
      @click.stop="showMenu($event)"
     >
      <i class="el-icon-more"></i>
     </span>
    </div>
   </el-tree>
 </div>
</template>

<script lang="ts">
 import { Vue, Component, Prop, Watch} from "vue-property-decorator";
 import ActionList from "@/components/ActionList/index.vue";
 import modelFun from "@/components/PublicModel/index";
 @Component({

 })
 export default class articleView extends Vue {
  menuList: string[] = ['  1','  2','  3'];
  data:any[] = [{
  id: 1,
  label: '   1',
  children: [{
   id: 4,
   label: '   1-1',
   children: [{
   id: 9,
   label: '   1-1-1'
   }, {
   id: 10,
   label: '   1-1-2'
   }]
  }]
  }, {
  id: 2,
  label: '   2',
  children: [{
   id: 5,
   label: '   2-1'
  }, {
   id: 6,
   label: '   2-2'
  }]
  }, {
  id: 3,
  label: '   3',
  children: [{
   id: 7,
   label: '   3-1'
  }, {
   id: 8,
   label: '   3-2'
  }]
  }];
  menuClick(name:string){
   console.log(name)
   this.$message({message:name,type:'success'})
  }
  showMenu($event:any){
   modelFun(
    this.$createElement(
     ActionList,
     {
      props: { menu:this.menuList },
      on:{
       click: this.menuClick,
      }
     }
    ),
    $event
   )
  }
 };
</script>

효과:

이상 은 vue 를 클릭 하여 팝 업 상 자 를 조작 하 는 예제 의 상세 한 내용 입 니 다.vue 팝 업 상자 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!