为什么Bootstrap Vue的toaster提示会立即消失且位置异常？

问题原因 #

1. BootstrapVue Toast组件的title、内容参数要求为字符串类型，你当前代码传入的是数组格式，导致组件配置解析异常，位置规则不生效、toast异常闪烁。
2. 捕获到错误弹出toast后没有终止后续代码执行，后续逻辑会触发组件重渲染，刚生成的toast会被直接销毁。
3. 若未在项目入口完整注册ToastPlugin，也会导致配置项不生效。

修复方案 #

1. 修正Toast调用参数与逻辑 #

修改ErrorMessage.vue代码，统一参数为字符串类型，补充可选的自动隐藏时长配置：

<script>
export default {
    methods: {
        showErrorMessage (msg) {
            // 统一转成字符串格式
            const content = Array.isArray(msg) ? msg.join('') : msg
            this.$root.$bvToast.toast(content, {
                title: "Error!",
                variant: "danger",
                toaster: "b-toaster-bottom-right",
                autoHideDelay: 3000 // 单位毫秒，设置3秒后自动隐藏
            });
        }
    }
};
</script>

2. 错误触发后终止后续逻辑 #

修改ArticleForm.vue的passArticleData方法，捕获错误后加return阻止后续代码执行：

passArticleData (e) {
    // Get title from input
    try {
        this.articleToPass.title = this.$refs.articleHtml.getElementsByTagName("h1").item(0).innerHTML;
    } catch (e) {
        this.showErrorMessage("Body md can't be blank");
        // 终止后续逻辑执行
        return
    }

    // Remove first line(title) from users' input
    this.articleToPass.body = this.input.substring(this.input.indexOf("\n") + 1);

    // tag id of written article
    const tagIds = this.insertedTags.map(obj => obj.id);
    this.tagsToPass = tagIds;
    this.$emit("handle-new-data", this.articleToPass, this.tagsToPass);
}

3. 确认Toast插件完整注册 #

检查项目入口文件main.js，确保已经注册ToastPlugin：

import { BootstrapVue, ToastPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
// 必须单独注册Toast插件
Vue.use(ToastPlugin)

内容的提问来源于stack exchange，提问作者work sarah