README-zh_CN.md

Mosha Vue Toastify

轻量好看好用的Vue3通知提醒组件

English | 简体中文

别说太多，用了再说

来文档中的体验区试一试吧！

功能

• 简单易用，看看这里
• 划屏取消提醒
• 完全支持Composition API
• 完全支持typescript
• 超级轻量
• 自定义提醒
• 用好玩的进度条提醒剩余时间
• 敬请期待更多新功能！

安装

NPM:

$ npm install mosha-vue-toastify

Yarn:

$ yarn add mosha-vue-toastify

精华

<template>
  <button @click="toast">Toast it!</button>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
// 导入库
import { createToast } from 'mosha-vue-toastify';
// 导入提醒框样式
import 'mosha-vue-toastify/dist/style.css'

export default defineComponent({
  name: 'HelloWorld',
  setup () {
    const toast = () => {
        createToast('就这么简单噢')
    }
    return { toast }
  }
})
</script>

具体用法

createToast 方法接受两个参数:

• 第一个参数:

  • 可以是一个字符串也可以是一个像这样的对象 { title: 'some title', description: 'some good description'}, description 可以是字符串或者是HTML
  • 也可使是一个Vue组件或是一个VNode, 比如：

    // without props
    import { createToast } from 'mosha-vue-toastify';
    import CustomizedContent from "./CustomizedContent.vue";
    import 'mosha-vue-toastify/dist/style.css';
  
    export default defineComponent({
      setup () {
        const toast = () => {
            createToast(CustomizedContent)
        }
        return { toast }
      }
    })

    // with props
    import { createToast, withProps } from 'mosha-vue-toastify';
    import CustomizedContent from "./CustomizedContent.vue";
    import 'mosha-vue-toastify/dist/style.css';
  
    export default defineComponent({
      setup () {
        const toast = () => {
            createToast(withProps(CustomizedContent, { yourFavProp: 'bruh' }))
        }
        return { toast }
      }
    })

• 第二个参数: 第二个参数是options，可以自定义提醒框。

  name	type	default	description
  type	'info', 'danger', 'warning', 'success', 'default'	'default'	给与不同的样式
  timeout	number	5000	自定义多少ms后关闭. 注：设定为-1会让提醒框忽略timeout
  position	'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'	'top-right'	自定义提醒框位置
  showCloseButton	boolean	true	显示关闭按钮
  showIcon	boolean	false	显示图标
  transition	'bounce', 'zoom', 'slide'	'bounce'	自定义动画
  hideProgressBar	boolean	false	关闭进度条
  swipeClose	boolean	true	是否允许滑动关闭
  toastBackgroundColor	string	default color	自定义背景颜色
  onClose	function	N/A	这个方法会在提醒框消失时调用

• 以编程的方式关闭提醒框 createToast函数会返回一个对象，对象中包含一个叫close的函数。调用close函数会关闭所属提醒框，请看下面例子。

      import { createToast } from 'mosha-vue-toastify';
      import CustomizedContent from "./CustomizedContent.vue";
      import 'mosha-vue-toastify/dist/style.css';
  
      export default defineComponent({
        setup () {
          const toast = () => {
              // 调用close能直接关闭提醒框
              const { close } = createToast(CustomizedContent)
              // close()
          }
  
          return { toast }
        }
      })

  调用clearToasts函数会关闭页面上所有的提醒框。

      import { createToast, clearToasts } from 'mosha-vue-toastify';
      import CustomizedContent from "./CustomizedContent.vue";
      import 'mosha-vue-toastify/dist/style.css';
  
      export default defineComponent({
        setup () {
          const clear = () => {
            // 关闭所以提醒框
            clearToasts()
          }
  
          return { clear }
        }
      })

支持一下吧

喜欢的话给这个项目 一个⭐吧。有什么建议的话欢迎开issue噢。