Bagaimana untuk membuka lungsur pilih pada hover menggunakan Bootstrap Vue

Question

Saya memerlukan cara untuk mencetuskan <select> 或 <b-form-select> dan tunjukkan senarai juntai bawah pilihan pada tetikus. Tiada penggunaan JQuery atau mana-mana pemalam luaran selain daripada Vue.js.

Answer 1

Dari pemahaman saya, anda mahu melakukan ini dalam mouseover 和 mouseleave 事件上显示/隐藏 <b-form-select> . Jika ya, saya ada beberapa cadangan :

• Gunakan div sebagai pembalut, ini akan mencetuskan mouseover 和 mouseleave 事件。我们可以通过在其自身附加 native untuk mencetuskan acara tetikus secara langsung, tetapi setelah disembunyikan, tiada cara untuk memulihkan dropdown pada tetikus sekali lagi.
• Anda boleh tunjukkan/sembunyikan dropdown melalui arahan v-show. Kita boleh menetapkan nilai dengan mudah melalui acara tetikus.

Tunjuk cara kerja:

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"/>