如何使用 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"/>