Toast

A lightweight feedback component that appears in the middle of the page.

Note

Toast supports controlling component styles through the props attribute since version 1.7.0. See props for fields. Note that the options priority of functional call API is higher than props.

For global calling solutions, see wot-starter, which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.

Basic Usage

The Toast component is a functional component that can be used by calling the $toast method on the current instance.

<wd-button @click="open">Text Toast</wd-button>

import { useToast } from 'wot-design-uni'

export default {
  setup() {
    const toast = useToast()

    const open = () => {
      toast.show('This is a toast')
    }

    return {
      open
    }
  }
}

Success Toast

Set the type parameter to 'success' to display a success toast.

const open = () => {
  toast.success('Success')
}

Error Toast

Set the type parameter to 'error' to display an error toast.

const open = () => {
  toast.error('Error')
}

Warning Toast

Set the type parameter to 'warning' to display a warning toast.

const open = () => {
  toast.warning('Warning')
}

Loading Toast

Set the type parameter to 'loading' to display a loading toast.

const open = () => {
  toast.loading('Loading')
}

Custom Icon

Set the icon parameter to customize the icon of the toast.

const open = () => {
  toast.show({
    msg: 'Custom Icon',
    icon: 'check-outline'
  })
}

Custom Image

Set the iconUrl parameter to customize the image of the toast.

const open = () => {
  toast.show({
    msg: 'Custom Image',
    iconUrl: 'https://example.com/image.png'
  })
}

Custom Duration

Set the duration parameter to customize the display duration of the toast, in milliseconds. If set to 0, the toast will not automatically close.

const open = () => {
  toast.show({
    msg: 'Custom Duration',
    duration: 5000
  })
}

Custom Position

Set the position parameter to customize the position of the toast, which can be 'top', 'middle', 'bottom', default is 'middle'.

const open = () => {
  toast.show({
    msg: 'Custom Position',
    position: 'top'
  })
}

Close Toast

Call the close method to close the toast.

const open = () => {
  toast.loading('Loading')
  setTimeout(() => {
    toast.close()
  }, 2000)
}

Composables

Name	Description	Parameters	Return Value
useToast	Get the toast instance	-	Toast instance

Toast Methods

Method Name	Description	Parameters	Return Value
show	Show toast	options: ToastOptions / msg: string	-
success	Show success toast	options: ToastOptions / msg: string	-
error	Show error toast	options: ToastOptions / msg: string	-
warning	Show warning toast	options: ToastOptions / msg: string	-
loading	Show loading toast	options: ToastOptions / msg: string	-
close	Close toast	-	-

ToastOptions

Attribute	Description	Type	Default	Version
msg	Toast content	string	-	-
duration	Toast display duration, in milliseconds, 0 means not automatically close	number	2000	-
iconName	Icon name, see Icon component for optional values	string	-	-
iconUrl	Custom image url	string	-	-
iconSize	Icon size	string	-	-
loadingType	Loading type, valid when type is loading	string	circular	-
loadingColor	Loading color, valid when type is loading	string	#4D80F0	-
position	Toast position	string	middle	-
zIndex	Toast z-index	number	100	-
id	Toast id	string	-	-
className	Custom class name	string	-	-

Source Code

Documentation

• Component