如何从外部元素触发 bootstrap-vue 下拉菜单?
How to trigger bootstrap-vue dropdown from outside element?
我正在尝试从外部按钮打开 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>
我看到类似的讨论here。但其中 none 正在工作。有任何更新或任何其他方法吗?
您链接的 PR 添加了 show
和 hide
方法,可以通过将 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/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/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>
我正在尝试从外部按钮打开 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>
我看到类似的讨论here。但其中 none 正在工作。有任何更新或任何其他方法吗?
您链接的 PR 添加了 show
和 hide
方法,可以通过将 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/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/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>