我需要一种方法来触发 <select> 或 <b-form-select> 并在鼠标悬停时显示下拉选项列表。不使用 JQuery 或除 Vue.js 之外的任何外部插件。
<select>
<b-form-select>
根据我的理解，您想在 mouseover 和 mouseleave 事件上显示/隐藏 <b-form-select> 。如果是，我有一些建议：
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"/>
根据我的理解，您想在
mouseover和mouseleave事件上显示/隐藏<b-form-select>。如果是，我有一些建议：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; }