Vue 3 Toast & Snackbar组件– Mosha Vue Toastify

Vue 3 Toast & Snackbar组件– Mosha Vue Toastify
插件名称 szboynono
版本号 v1.0.11
发布时间 2021年4月25日
插件作者 mosha-vue-toastify

轻巧有趣的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)

  • 修正:滑动修正错误