elementのPopoverプロンプトボックスのリサイクル方法

前言
久しぶりにブログを書きましたが、先日出会ったニーズの知識点をまとめましょう.elementのPopoverプロンプトボックスは表やulページでどのようにリサイクルされていますか.Popoverでヒントを与えた時にいくつかの問題に出会って、記録します;
本文
一、公式popoverの使用方法を解析する
公式サイト:element-popover

  <el-popover
    placement="bottom"
    title="  "
    width="200"
    trigger="click"
    content="      ,      ,      ,      。">
    <el-button slot="reference">click   </el-button>
  </el-popover>

公式サイトの例はすべて単一のヒントで、転送呼び出しの各サブクラスに1つのヒントボックスがある需要をあまり満たしていない.また、slot="reference"という呼び出し方法を使用して、ループ呼び出しで失効する.もう1つの方法があります

 <el-popover
    ref="popover"
    placement="right"
    title="  "
    width="200"
    trigger="focus"
    content="      ,      ,      ,      。">
  </el-popover>
  <el-button v-popover:popover>focus   </el-button>

v-popover:popoverバインディングrefを使用してプロンプトボックスを呼び出すが、正規の使用は問題ないが、ループではdomごとのref="popover"はループして値を割り当てることができるが、v-popover:popoverでバインディングされたpopoverは唯一可変ではなく、プロンプトボックスは第1項のプロンプトボックスしか表示できないが、需要を満たすことができない.
二、実際のプロジェクトはどのようにpopoverをリサイクルしますか?
dom上でカスタムイベントを使用してpopoverをループ呼び出します.
シミュレーションhover効果

コンポーネントに値をバインド:v-model="item.isShowPopover"

マウス移動時にバインディングの値をTRUE:@mouseenter="item.isShowPopover = true"

に変更

マウス移動時にバインド値をFALSR:@mouseleave="item.isShowPopover = false""

に変更

<template>
<ul class="col" v-for="(item,index) in tableData" :key="index">
  <li
    @mouseenter="item.isShowPopover = true"
    @mouseleave="item.isShowPopover = false"
  >{
     {
     item.name}}    {
     {
     index+1}} </li>
  <el-popover title="   " v-model="item.isShowPopover" width="200">
           
    <p>name:{
     {
     item.name}}</p>
    <p>room:{
     {
     item.room}}</p>
  </el-popover>
</ul>
</template>
<script>
export default {
     
  data() {
     
    return {
     
      tableData: [
      {
     name:' 1',room:111},
      {
     name:' 2',room:222},
      ]
     }
  }
}
</script>

シミュレーションclick効果
バインドイベント:@click="item.isShowPopover = !item.isShowPopover";イベントをバインドして、クリックしてから3秒後に消えることもできます.

  methods: {
     
    showPopover(item, index) {
     
      item.isShowPopover = !item.isShowPopover;
      this.$set(this.tableData, index, item);
      setTimeout(() => {
     
        item.isShowPopover = !item.isShowPopover;
        this.$set(this.tableData, index, item);
      }, 3000);
    },
 }

以上、popoverのスタイルや表示位置(top,bottom,left,right)を制御するのが失効している場合は、domツリーを見ると、単一ではなくdomをul内部に挿入するので、位置を調整したい場合は、自分で通常のスタイルでcssを変更すればよい.
tableでpopoverを使用する
公式サイト:tableでpopoverを使用する例は説明していませんが、このscopeの方式が失効すれば、最終的にはv-modeバインドを使用する価値のある方法も考えられます.
もし本文があなたの役に立つならば、私にcallを打つことを称賛することを忘れないでください~o(̄▽̄)doは問題の伝言overがあります~