javascript - 如何使用 Bootstrap Vue 在悬停时打开选择下拉菜单

Question

我需要一种方法来触发 <select>或 <b-form-select>并在鼠标悬停时显示下拉选项列表。不使用 JQuery 或 Vue.js 以外的任何外部插件。

Answer 1

据我了解，您想显示/隐藏 <b-form-select>在 mouseover和 mouseleave事件。如果是，我有一些建议:

• 使用 div 作为包装器，这将触发 mouseover和 mouseleave事件。我们可以通过附加 native 来直接触发鼠标事件。本身，但一旦它隐藏，将无法再次将鼠标悬停在下拉菜单上。
• 您可以通过 v-show 简单地显示/隐藏下拉菜单指示。我们可以轻松地从鼠标事件中设置值。

工作演示:

new Vue({
  el: '#app',
  data() {
    return {
      selected: null,
      isVisible: true,
      options: [
        { value: null, text: 'Please select an option' },
        { value: 'a', text: 'This is First option' },
        { value: 'b', text: 'Selected Option' },
        { value: { C: '3PO' }, text: 'This is an option with object value' },
        { value: 'd', text: 'This one is disabled', disabled: true }
      ]
    }
  },
  methods: {
    onOver() {
      this.isVisible = true;
    },
    onLeave() {
      this.isVisible = false;
    }
  }
})

.wrapper-div {
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css"/>
<div id="app">
  <div class="wrapper-div" @mouseover="onOver" @mouseleave="onLeave">
    <b-form-select
                   v-model="selected"
                   :options="options"
                   v-show="isVisible">
    </b-form-select>
  </div>
</div>