Vuejs：如何为每个下拉项目实现弹出窗口

Question

我希望在用户将鼠标悬停在下拉项上时向其显示信息文本。每个下拉列表都是唯一的。我正在使用 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>Information Text Here</div>
</b-popover>

是否有一个选项可以将 id 动态附加到，以便可以在 .尝试过

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

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

Answer 1

您可能需要将元素的一些属性绑定到

id 个 <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>

Answer 2

最简单的方法是使用 popover 指令 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/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/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/bootstrap-vue@2.16.0/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',
  data() {
    return {
      colorTypes: [{
          id: 1,
          color: 'Blue',
          name: '<b class="text-primary">Blue<b>'
        },
        {
          id: 2,
          color: 'Red',
          name: '<b class="text-danger">Red<b>'
        },
        {
          id: 3,
          color: 'Green',
          name: '<b class="text-success">Green<b>'
        }
      ]
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/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/bootstrap-vue@2.16.0/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>

Vuejs：如何为每个下拉项目实现弹出窗口

Vuejs: How to implement popover for each dropdown-items

javascript

css

vue.js

bootstrap-vue

弹出框内带有 HTML 的示例