Message UPDATED ​

Message component is used to give timely feedback to user's operations. It could be the result feedback of the operation, such as success, failure, error, warning, etc and more.

Basic usage ​

Basic usage of message.

Types ​

Use different methods to show different type Message, It includes success, warning, error ,info,primary and secondary.

Closable ​

Use closable to show close icon and close message.

Custom Icon ​

Use icon to show icon before content

Duration ​

Use duration to control the message components display time. the defaultValue is 5000 ms

Use HTML string ​

If you want to inset HTML to message, set parseHtml to true, then message will be treated as an HTML String.

Global Methods ​

The global methods provided by Message can be used in the following two ways:

1. option API: this.$message

this.$message(content | options)
this.$message.primary(content | options)
this.$message.secondary(content | options)
this.$message.success(content | options)
this.$message.warning(content | options)
this.$message.error(content | options)
this.$message.info(content | options)
this.$message.close()

this.$message(content | options)
this.$message.primary(content | options)
this.$message.secondary(content | options)
this.$message.success(content | options)
this.$message.warning(content | options)
this.$message.error(content | options)
this.$message.info(content | options)
this.$message.close()

2. composition API: OMessage

<script setup lang="ts">
import { OMessage } from 'onu-ui'
OMessage(content | options)
OMessage.primary(content | options)
OMessage.secondary(content | options)
OMessage.success(content | options)
OMessage.warning(content | options)
OMessage.error(content | options)
OMessage.info(content | options)
OMessage.close()
</script>

<script setup lang="ts">
import { OMessage } from 'onu-ui'
OMessage(content | options)
OMessage.primary(content | options)
OMessage.secondary(content | options)
OMessage.success(content | options)
OMessage.warning(content | options)
OMessage.error(content | options)
OMessage.info(content | options)
OMessage.close()
</script>

Message Props ​

Message methods ​