轻巧有趣的Vue 3吐司或通知栏或小吃店，但是您想要将其称为库。

特征

• 超级容易设置！
• 滑动即可关闭
• 支持Composition API
• 以打字稿撰写，完整的打字稿支持
• 超轻量
• 定义每杯吐司的行为
• 有趣的进度条显示剩余时间
• 还有更多！

安装

使用NPM：

$ npm install mosha-vue-toastify

使用纱线：

$ yarn add mosha-vue-toastify

使用

1.导入必要的组件。

import { defineComponent } from ‘vue’
import { createToast } from ‘mosha-vue-toastify’;
import ‘mosha-vue-toastify/dist/style.css’

2.启用按钮以显示基本通知。

<template>
  <button @click="toast">Click Me</button>
</template>

export default defineComponent({
  name: 'myApp',
  setup () {
    const toast = () => {
      createToast('Basic Toast.')
    }
    return { toast }
  }
})

3.在toast 消息中添加标题。

createToast({
  title: 'Toast title', 
  description: 'Toast description'
})

4.可用的自定义选项。

createToast({
  title: 'Toast title', 
  description: 'Toast description'
},{
  type: 'default', // 'info', 'danger', 'warning', 'success', 'default'
  timeout: 5000,
  showCloseButton: true,
  position: 'top-right', // 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'
  transition: 'bounce',
  hideProgressBar: false,
  swipeClose: true,
  toastBackgroundColor: '#fafafa',
  onClose: null
})

变更日志：

v1.0.11（04/26/2021）

• 修正：滑动修正错误

---

官网：https://github.com/szboynono/mosha-vue-toastify

演示：https://www.vue365.cn/code_demo.php?id=4540

GitHub下载：https://github.com/szboynono/mosha-vue-toastify/archive/refs/heads/main.zip