搜索

首页  >  问答  >  正文

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

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

P粉635509719P粉635509719237 天前455

全部回复(1)我来回复

  • P粉222320176

    P粉2223201762024-03-27 09:09:37

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

    • 使用 div 作为包装器,这将触发 mouseovermouseleave 事件。我们可以通过在其自身附加 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"/>
    

    回复
    0
  • 取消回复