vue bootstrap 烤面包机立即消失/隐藏自身

Question

在我的 Vue Bootstrap (v2.21.2) Web 应用程序中，我想使用 Toast 向用户显示一些错误。这些错误是由 REST-API 客户端产生的。在我的 vb-components 中，我捕获这些错误并调用一个函数，该函数本身使用https://bootstrap-vue.org/docs/components/toast#toasts-on-demand this.$bvToast.toast()来动态创建和显示错误消息。正如预期的那样，吐司已创建，但会立即再次隐藏。我尝试禁用自动隐藏属性并尝试设置超时，但没有效果。由于我在某些子组件中调用此函数，因此我也尝试调用，this.$root.$bvToaster.toast()但 toast 仍然只显示大约 100 微秒左右。

我的项目的相关（减少）代码摘录：

应用程序.vue：

<template>
  <div id="app">
    <Navbar @viewChanged="view = $event;" />
    <Pki v-if="view == 'pki'" />
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import Pki from './components/Certificates'
export default {
  data() {
    return {
      view: null
    }
  },
  name: "FooBar",
  components: {
    Navbar,
    Pki
  },
};
</script>

证书.vue：

<template>
    <!-- ... -->
</template>

<script>
    // ...
    mounted() {
      this.getCertificates();
    },
    methods: {
      alert(title, content, variant = 'danger') {
        this.$bvToast.toast(content, {
          title: title,
          toaster: 'b-toaster-bottom-right',
          variant: variant,
          solid: true,
          appendToast: true,
          autoHideDelay: 10000
        });
      },
      getCertificates() {
        axios.get("/v1/pki/certificates")
        .then((response) => {
             // ...
          });
        })
        .catch((error) => {
          this.alert('API Error', 'failed to fetch certificate list (' + error.message + ')');
          console.log('getCertificates(): HTTP ERROR ' + error.response.status + ' (' + error.response.data + ')');
        });
      }
    }
</script>

Answer 1

如果您使用 bootstrap 5 只需添加此 css

.toast:not(.show) {
   display: block;
}