vue3-vite-toast v1.0.3

vue3-vite-toast 弱提示弹出框

vue3-vite-toast 弹出框是什么？

是一个弱提示弹出框，像一些常用框架: ant-design, element-ui, vant 等，包括weex都内置了toast组件，但对于纯vue项目中网络请求或者弹出异常的时候，每次都要写一个toast组件来复用效率不高，所以封装了一个可以“拿来即用"的toast小组件。

目前支持的版本?

toast封装基于vue3+vite, 目前不适用于vue2项目

如何使用?

1. 全局安装vue3-vite-toast

javascript
npm install vue3-vite-toast

2. 按需引用&全局引用 (1) 按需引用 import 相关组件和样式

   import {toast} from 'vue3-vite-toast'
   
   import 'vue3-vite-toast/style.css'

   (2) 全局引用

   在 main.js 中

   import {toast} from 'vue3-vite-toast'
   import 'vue3-vite-toast/style.css'

   配置全局:

   app.config.globalProperties.$toast = toast // 全局配置

   在 所需要用到的页面 中

   import { getCurrentInstance } from ``'vue'

   通过 getCurrentInstance这个函数来返回当前组件的实例对象

   const { proxy } = getCurrentInstance()

3. 使用

   (1) 按需使用

   toast(``'要显示内容'``, 毫秒数) ``// toast('用户未登录', 3000)

   (2) 全局使用

   proxy.$toast(``'要显示内容'``, 毫秒数)

目前未实现的情况

1. 目前传参内容有限，只能传两个参数(显示的内容, 毫秒数)
2. 位置字体无法改变。不好调整
3. 不支持样式的修改，比如success, warning, error等