时间戳

首页 > 解决方案 > 如何在独立的 javascript 文件中制作 Bootstrap-vue Toast

javascript - 如何在独立的 javascript 文件中制作 Bootstrap-vue Toast

问题描述

自从我学习vue.js已经有几天了，我想制作一个显示 Toast 的函数，从官方 bootstrap-vue 文档中读取：https ://bootstrap-vue.org/docs/components/toast# toasts-on-demand，我能够通过组件实例注入和自定义组件制作 toast ，但是，我想通过独立的javascript 函数 /file制作另一个自定义 toast ，以便我可以动态调用它。

这是我使用注入的Cart.vue代码：

<script>
export default {
  methods: {
    purchaseHandler() {
      this.$bvToast.toast('The item added to your cart', {
          title: 'Notification',
          variant: 'succes',
          solid: true
        })
    },
  },
};
</script>

但是，我将custom-toast.js作为独立的 js 函数/文件，并按照文档所述导入插件：

import Vue from 'vue'
import { ToastPlugin } from 'bootstrap-vue'
Vue.use(ToastPlugin)

export default () => {
    this.$bvToast.toast('Toast body content', {
        title: 'Toast test',
        variant: 'succes',
        solid: true
      })
}

我将custom-toast.js导入到我的Cart.vue文件中，现在看起来是这样的：

<script>
import customToast from "./custom-toast";
export default {
  methods: {
    purchaseHandler() {
      customToast()
  },
};
</script>

现在出现错误：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 '$bvToast'”

类型错误：无法读取未定义的属性“$bvToast”

我知道这是超级基础的东西，它以为我可以通过在独立的js文件中找到this.$bvToast注入的等价物来解决它，但是我找不到任何东西，因为我对Vue js的了解还很少，真正的问题

  1. this.$bvToast或独立 js 文件中的任何 bootstrap-vue 注入的等价物是什么？
  2. 我该如何解决这个问题？

谢谢你。抱歉英语不好

标签： javascriptvue.jsbootstrap-4vuejs2bootstrap-vue

解决方案

您可以在https://vuejs.org/v2/guide/mixins.html中创建一个 mixin 文件。在脚本部分导入并声明mixin后，您可以在mixin中调用函数。

推荐阅读