# Mosha Vue Toastify

[![Build Status](https://travis-ci.com/szboynono/mosha-vue-toastify.svg?branch=main)](https://travis-ci.com/szboynono/mosha-vue-toastify)

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

**Vue 版本支持**: 本库支持 Vue 3.0+，并已针对 Vue 3.5.x 进行测试。为了获得最佳体验，我们推荐使用 Vue 3.5 或更高版本。

[English](./README.md) | 简体中文

![alt text](./gif/demo.gif "Logo Title Text 1")

## 别说太多，用了再说

来文档中的[体验区](https://szboynono.github.io/mosha-vue-toastify/)试一试吧！

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

## 安装

**要求**: Vue 3.0.0 或更高版本（推荐 Vue 3.5.x）

NPM:

```bash
$ npm install mosha-vue-toastify
```

Yarn:

```bash
$ yarn add mosha-vue-toastify
```

**注意**: 请确保您的项目中已安装 Vue 3。本库向后兼容 Vue 3.0+，但在使用 Vue 3.5+ 时可以充分利用新特性。

## 精华
```html
<template>
  <button @click="toast">Toast it!</button>
</template>
```
```ts
<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, 比如：
  ```ts
    // 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 }
      }
    })
  ```
  ```ts
    // 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`函数会关闭所属提醒框，请看下面例子。
  ```ts
      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`函数会关闭页面上所有的提醒框。
  ```ts
      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 }
        }
      })
  ```

## 支持一下吧

喜欢的话给这个[项目](https://github.com/szboynono/mosha-vue-toastify) 一个⭐吧。有什么建议的话欢迎开issue噢。