vue3 | toastify插件 | setup语法糖 | 函数式调用

vue3-toastify插件实现toast功能

官网：vue3-toastify.netlify.app/get-started…

效果图

demo

安装

npm install --save vue3-toastify

使用

在src-utils-extract.js文件中封装方法：

// 调用toast(error)
export function Toast(data) {
  return toast(data, {
    theme: 'auto',
    type: 'error',
    position: 'top-left',
    autoClose: 1500,
    transition: 'zoom',
    limit: 1,
    dangerouslyHTMLString: true
  })
}

在需要引用的vue文件里面 ：

import { ref } from 'vue'
import { Toast } from '@/utils/extract'

const msg = ref('toast内容')
Toast(msg.value)

更多参数

Container Props

Props	Type	Default Value	Description
multiple	boolean	true	display multiple at the same time
limit	number	-	limit the number of toast displayed at the same time
newestOnTop	boolean	false	Display newest toast on top
containerClassName	string	-	Add optional classes to the container
dangerouslyHTMLString	boolean	false	render unsafe string, like html tag
clearOnUrlChange	boolean	true	clear all toasts on url change
icon	IconType	-	Used to display a custom icon. Set it to false to prevent
rtl	boolean	false	Support right to left content
containerId	Id	toast.POSITION.TOP_RIGHT	Used to identify the Container when working with multiple container. Also used to set the id attribute
position	ToastPosition	toast.POSITION.TOP_RIGHT	One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClose	number\boolean	5000	Delay in ms to close the toast. If set to false, the notification needs to be closed manually
closeButton	VNode\boolean	default close icon	Replace the default close button or false to hide the button
transition	ToastTransition\CSSTransitionProps	toast.TRANSITIONS.Bounce	A reference to a valid transition animation
hideProgressBar	boolean	false	Display or not the progress bar below the toast(remaining time)
pauseOnHover	boolean	true	Keep the timer running or not on hover
pauseOnFocusLoss	boolean	true	Pause the timer when the window loses focus
closeOnClick	boolean	true	Dismiss toast on click
toastClassName	string	-	Add optional classes to the toast
bodyClassName	string	-	Add optional classes to the toast body
style	CSSProperties	-	Add optional inline style to the container
progressClassName	string	-	Add optional classes to the progress bar
progressStyle	CSSProperties	-	Add optional inline style to the progress bar
role	string	alert	Define the ARIA role for the toasts
theme	ToastTheme	auto	One of auto, light, dark, colored, auto means automatically detects system theme colors

Toast Props

Props	Type	Default Value	Description
toastId	Id	-	Provide a custom id
updateId	Id	-	Used during update
data	T	-	any additional data you want to pass toast("hello", { data: {key: value} } as T)
type	ToastType	'default'	One of info, success, warning, error, default
delay	number	-	Let you delay the toast appearance. Pass a value in ms
onOpen	() => void	-	Called when the notification appear
onClose	() => void	-	Called when the notification disappear
onClick	(event: MouseEvent) => void	-	Called when click inside Toast notification
toastStyle	CSSProperties	-	Add optional inline style to the toast wrapper
progress	number	-	Set the percentage for the controlled progress bar. Value must be between 0 and 1.
render	ToastContent	-	Only available when using toast.update
isLoading	bollean	-	Only available when using `toast.loading'
dangerouslyHTMLString	boolean	false	render unsafe string, like html tag
icon	IconType	-	Used to display a custom icon. Set it to false to prevent
rtl	boolean	false	Support right to left content
containerId	Id	toast.POSITION.TOP_RIGHT	Used to identify the Container when working with multiple container. Also used to set the id attribute
position	ToastPosition	toast.POSITION.TOP_RIGHT	One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClose	number\boolean	5000	Delay in ms to close the toast. If set to false, the notification needs to be closed manually
closeButton	VNode\boolean	default close icon	Replace the default close button or false to hide the button
transition	ToastTransition\CSSTransitionProps	toast.TRANSITIONS.Bounce	A reference to a valid transition animation
hideProgressBar	boolean	false	Display or not the progress bar below the toast(remaining time)
pauseOnHover	boolean	true	Keep the timer running or not on hover
pauseOnFocusLoss	boolean	true	Pause the timer when the window loses focus
closeOnClick	boolean	true	Dismiss toast on click
toastClassName	string	-	Add optional classes to the toast
bodyClassName	string	-	Add optional classes to the toast body
style	CSSProperties	-	Add optional inline style to the container
progressClassName	string	-	Add optional classes to the progress bar
progressStyle	CSSProperties	-	Add optional inline style to the progress bar
role	string	alert	Define the ARIA role for the toasts
theme	ToastTheme	auto	One of auto, light, dark, colored, auto means automatically detects system theme colors