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

Question

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

Answer 1

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

• 使用 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;
}

sssccc
sssccc
[email protected]/dist/bootstrap-vue.css"/>