8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

使用 bootstrap-vue-next 的 toast 用法

MP-SATARA 2月前

38 0

关于如何使用 bootstrap-vue-next 使用 toast 的任何想法?my-component.ts:从“vue”导入 { defineComponent };从 \'vue\' 导入 { ref };从“bootstrap-vue-next”导入 { useToast };

关于如何使用 bootstrap-vue-next 使用 toast 有什么想法吗?

我的组件.ts:

import { defineComponent } from 'vue';
import { ref } from "vue";
import { useToast } from 'bootstrap-vue-next';

export default defineComponent({
  data() {
    return {
      abc: '',
    }
  },
  setup() {
    const toast = useToast()
    return toast
  },
  async mounted() {
    // do nothing
  },
  methods: {
    async testToast() {
      try {
        this.show?.({props: {variant: 'success', title: 'Message', body: 'Toasted successfully!'}});
      } catch (err) {
        console.log(err)
        this.show?.({props: {variant: 'danger', title: 'Message', body: 'Something went wrong!'}})
      }
    }
  }
})

我的组件.vue:

<template>
  <div class="my-component">
    <BButton @click="testToast" variant="success">Click Me</BButton>
  </div>
</template>
<script lang="ts">
  import MyComponent from './my-component';
  export default MyComponent;
</script>

上面的代码对我完全没用,非常感谢您的帮助。PS 此组件被注入到 app.ts 文件中,该文件包含为 App.vue 主组件编写的代码。

帖子版权声明 1、本帖标题:使用 bootstrap-vue-next 的 toast 用法
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由MP-SATARA在本站《vue.js》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 我在 qpopupedit 异步验证方面遇到了问题,我创建了一个 codepen。我认为它正在将返回布尔值转换为字符串。有人可以检查为什么它不起作用吗?我创建了一个 Codepen,你...

    我遇到了 qpopupedit 异步验证问题,我创建了一个 codepen。我认为它正在将返回布尔值转换为字符串。有人能检查一下它为什么不起作用吗?

    我创建了一个 Codepen 你可以查看

    async function validatecalories (val){
          errorCalories.value = true;
          errorMessageCalories.value = 'async error';
          return new Promise(function (resolve, reject) {
            setTimeout(function (){
              reject(false); 
              }, 300);
          });
        }
    
返回
作者最近主题: