如何使用 bootstrap-vue 中可用的“关闭”功能

Question

这就是我所说的崩溃

this.$root.$emit('bv::toggle::collapse', 'my-collapse-id')

但是如果我们单击同一个按钮它会打开和关闭，我想用关闭功能关闭折叠，目的是在关闭折叠时执行一些操作。

有没有例子说明我们如何在 bootstrap-vue 中使用 close 的崩溃功能？官网docs没有例子。

Answer 1

在关闭折叠时执行某些操作

不要改变切换或尝试使用关闭功能，只需使用<b-collapse> 在它开始关闭时发出的@hide event 来触发您想要的任何东西：

<b-collapse visible @hide="foo()">
  <b-card>C O N T E N T</b-card>
</b-collapse>

...
<script>
...
methods: {
  foo() {
    // do stuff
  },
},

这样，只要折叠开始关闭，hide 事件就会触发，并且您的方法将运行。

另外需要注意的是，您链接的 close 函数是在 <b-collapse> 的作用域槽中向子级公开的，因此无论如何您都无法在该上下文之外调用它。