Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

151
Visualizações
How to open a select dropdown on hover using Bootstrap Vue

I need a way to trigger the <select> or <b-form-select> and display the list of dropdown options on mouse hover. Without using JQuery or any external plugin other than Vue.js.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

As per my understanding you want to show/hide the <b-form-select> on mouseover and mouseleave event. If Yes, I have few suggestions :

  • Use a div as a wrapper which will trigger the mouseover and mouseleave events. We can directly trigger the mouse events by appending the native in the itself but once it will hide, there will be no way to get the dropdown back on mouseover again.
  • You can simply show/hide the dropdown via v-show directive. We can easily set the value from our mouse events.

Working Demo :

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css"/>
<div id="app">
  <div class="wrapper-div" @mouseover="onOver" @mouseleave="onLeave">
    <b-form-select
                   v-model="selected"
                   :options="options"
                   v-show="isVisible">
    </b-form-select>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

The effect of this solution is similar to opening the select by clicking on it (although, not the same ...)

<template>
  <select ref="mySelect" @mouseenter="hover(true)" @mouseleave="hover(false)" :size="size">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>
</template>

<script>
import {ref} from 'vue';
export default {
  name: "Test",
  setup(){
    const mySelect = ref();
    const size = ref('0');
    return {mySelect, size}
  },
  methods: {
    hover(val) {
      this.size = val ? this.mySelect.length.toFixed(0) : '0';
    }
  }
}
</script>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda