Comment ouvrir la liste déroulante de sélection en survol à l'aide de Bootstrap Vue

Question

J'ai besoin d'un moyen de déclencher <select> 或 <b-form-select> et d'afficher une liste déroulante d'options au survol de la souris. Aucune utilisation de JQuery ou de tout plugin externe autre que Vue.js.

Answer 1

D'après ce que j'ai compris, vous voulez faire cela en mouseover 和 mouseleave 事件上显示/隐藏 <b-form-select> . Si c'est le cas, j'ai quelques suggestions  :

• Utilisez un div comme wrapper, cela déclenchera mouseover 和 mouseleave 事件。我们可以通过在其自身附加 native pour déclencher directement les événements de la souris, mais une fois masqué, il n'y aura aucun moyen de restaurer à nouveau la liste déroulante au survol de la souris.
• Vous pouvez simplement afficher/masquer la liste déroulante via la commande v-show. Nous pouvons facilement définir la valeur via les événements de la souris.

Démo de travail :

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