Vuejs：如何为每个下拉项实施弹出框

问题描述

我希望在用户悬停下拉菜单项时向他们显示信息文本。每个下拉菜单唯一。我正在使用bootstrap-vue，下拉列表项有一个循环

<b-dropdown :text="currentColorType">
    <b-dropdown-item v-for="colorType in colorTypes"
    :key="colorType.id"
    :value="colorType.name">{{colorType.name}}</b-dropdown-item>
</b-dropdown>
<b-popover target="id" placement="bottom" triggers="hover blur">
    <div>@R_212_4045@ion Text Here</div>
</b-popover>

是否存在将ID动态附加到的选项，以便可以将ID作为目标提供。试过

id="colorType.name"
id="`${colorType.name}`"

但是没有用。也不确定即使我能够附加ID，它是否也会被触发。有没有更好的方法来显示有关下拉项悬停的信息？

解决方法

最简单的方法是使用弹出指令v-b-popover代替<b-popover>。 这将使您可以将弹出框直接附加到<b-dropdown-item>。

new Vue({
  el: '#app',data() {
    return {
      colorTypes: [{
          id: 1,name: 'Blue'
        },{
          id: 2,name: 'Red'
        },{
          id: 3,name: 'Green'
        }
      ]
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-dropdown text="Colors">
    <b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover="colorType.name">
      {{ colorType.name }}
    </b-dropdown-item>
  </b-dropdown>
</div>

示例在弹出窗口中带有HTML

new Vue({
  el: '#app',color: 'Blue',name: '<b class="text-primary">Blue<b>'
        },color: 'Red',name: '<b class="text-danger">Red<b>'
        },color: 'Green',name: '<b class="text-success">Green<b>'
        }
      ]
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <h5>Using the HTML modifier</h5>
  <b-dropdown text="Colors">
    <b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover.html="colorType.name">
      {{ colorType.color }}
    </b-dropdown-item>
  </b-dropdown>
  <hr />
  <h5>Using an object</h5>
  <b-dropdown text="Colors">
    <b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover="{ content: colorType.name,html: true }">
      {{ colorType.color }}
    </b-dropdown-item>
  </b-dropdown>
</div>

,

您可能需要将一些元素道具绑定到

id of <b-dropdown>

，也将v-for用于<b-popover>。

例如：

<b-dropdown :text="currentColorType">
  <b-dropdown-item 
   v-for="colorType in colorTypes"
   :key="colorType.id"
   :id="colorType.id"
   :value="colorType.name"
  >
    {{colorType.name}}
  </b-dropdown-item>
</b-dropdown>

<b-popover 
 v-for="(eachType,i) in colorTypes" 
 :key="i" 
 :target="eachType.id" 
 placement="bottom" 
 triggers="hover blur"
>
  <div>Information Text Here</div>
</b-popover>