vueがクリックしてポップアップボックスが表示される例を実現します。

上の図のように、今回はクリックして操作弾枠の効果が現れることを実現します。この機能を関数としてカプセル化し、アイテムの複数の場所で使用しやすい。
具体的な考え方は：
パッケージのコンポーネントは、コンポーネントは、スロットを保護するために、私たちはさまざまなシーンに応じて、スロットを使用して任意の要素をこのボックスに挿入することができますが、このボックスは、私のマウスのクリック位置に応じて、ばねの位置を特定し、コンポーネントの中でマウスをモニターし、イベントをトリガするときには、ばねを隠します。
次に、関数の中で、createelementとapendChildの方法でポップアップボックスを作成して、ページに挿入します。
　  今回の実現は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>

     次に、ポップアップボックスの中のセットも書いてみます。
     コンポーネントは任意にアクションリストと名づけられています。コンポーネントの中でリストデータとクリックイベントは父コンポーネントの伝達値に基づいています。

//       ： 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、handleOpenイベントではマウスをクリックして位置を決めます。

//       ： 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とapendChild方法を利用してポップアップボックスを作成してページに挿入します。
クリック時に要素を作成し、挿入するので、性能最適化のために、悪意のあるクリックを避けて、要素を作成したり、挿入したりします。
まずコードを直接見て、他のコメントはコードに書いてあります。関数名は自由に取ります。

//       ： 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とapendChild方法を利用してポップアップボックスを作成してページに挿入します。
クリック時に要素を作成し、挿入するので、性能最適化のために、悪意のあるクリックを避けて、要素を作成したり、挿入したりします。
まずコードを直接見て、他のコメントはコードに書いてあります。関数名は自由に取ります。

//       ： 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は、アクションリストコンポーネントを弾倉に挿入し、データとイベントをアクションリストコンポーネントに伝達します。ここで私たちが伝達するイベントは簡単に私たちがクリックしたデータをポップアップします。

//       ： 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ポップアップの枠の資料に関して私達のその他の関連している文章に注意して下さい！