Comment ouvrir la liste déroulante de sélection en survol à l'aide de Bootstrap Vue
P粉6355097192024-03-26 14:04:58
0
1
466
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.
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;
}
}
})
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 :mouseover和mouseleave事件。我们可以通过在其自身附加nativepour 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.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; }