我正在嘗試從外部按鈕打開 bootstrap-vue 下拉選單。例如：
<b-dropdown>
<template #button-content>
Custom <strong>Content</strong> with <em>HTML</em> via Slot
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>
<b-button @click="openDropdown">Open Dropdown</b-button>
<script>
methods: {
openDropdown(){
// do something
}
}
</script>
我在這里看到類似的討論。但他們都沒有作業。它的任何更新或任何其他方法？
uj5u.com熱心網友回復：
您鏈接的 PRshow和hide可以通過將 a 添加ref到來訪問的方法<b-dropdown>，然后在您的方法中參考此 ref。
<b-dropdown ref="myDropdown"></b-dropdown>
openDropdown() {
this.$refs.myDropdown.show();
}
作業示例
new Vue({
el: "#app",
methods: {
openDropdown() {
this.$refs.myDropdown?.show();
}
}
});<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<div id="app" class="p-4">
<b-dropdown ref="myDropdown">
<template #button-content>
Custom <strong>Content</strong> with <em>HTML</em> via Slot
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>
<b-button @click="openDropdown">Open Dropdown</b-button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395505.html