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.

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
const open = () => {
  message('This is a message')
}
</script>

<template>
  <o-button type="primary" @click="open">
    Show Message
  </o-button>
</template>

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
const open = () => {
  message('This is a message')
}
</script>

<template>
  <o-button type="primary" @click="open">
    Show Message
  </o-button>
</template>

Types

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

<script setup lang='ts'>
import { OMessage } from 'onu-ui'
const open1 = () => {
  OMessage({
    content: 'This is a primary message',
    type: 'primary',
  })
}

const open2 = () => {
  OMessage({
    content: 'This is a secondary message',
    type: 'secondary',
  })
}
const open3 = () => {
  OMessage({
    content: 'This is a success message',
    type: 'success',
  })
}
const open4 = () => {
  OMessage({
    content: 'This is a warning message',
    type: 'warning',
  })
}
const open5 = () => {
  OMessage({
    content: 'This is a error message',
    type: 'error',
  })
}
const open6 = () => {
  OMessage({
    content: 'This is a info message',
    type: 'info',
  })
}
</script>

<template>
  <div fscw gap-2>
    <o-button type="primary" @click="open1">
      primary
    </o-button>
    <o-button type="secondary" @click="open2">
      secondary
    </o-button>
    <o-button type="success" @click="open3">
      success
    </o-button>
    <o-button type="warning" @click="open4">
      warning
    </o-button>
    <o-button type="error" @click="open5">
      error
    </o-button>
    <o-button type="info" @click="open6">
      info
    </o-button>
  </div>
</template>

<style>

</style>

<script setup lang='ts'>
import { OMessage } from 'onu-ui'
const open1 = () => {
  OMessage({
    content: 'This is a primary message',
    type: 'primary',
  })
}

const open2 = () => {
  OMessage({
    content: 'This is a secondary message',
    type: 'secondary',
  })
}
const open3 = () => {
  OMessage({
    content: 'This is a success message',
    type: 'success',
  })
}
const open4 = () => {
  OMessage({
    content: 'This is a warning message',
    type: 'warning',
  })
}
const open5 = () => {
  OMessage({
    content: 'This is a error message',
    type: 'error',
  })
}
const open6 = () => {
  OMessage({
    content: 'This is a info message',
    type: 'info',
  })
}
</script>

<template>
  <div fscw gap-2>
    <o-button type="primary" @click="open1">
      primary
    </o-button>
    <o-button type="secondary" @click="open2">
      secondary
    </o-button>
    <o-button type="success" @click="open3">
      success
    </o-button>
    <o-button type="warning" @click="open4">
      warning
    </o-button>
    <o-button type="error" @click="open5">
      error
    </o-button>
    <o-button type="info" @click="open6">
      info
    </o-button>
  </div>
</template>

<style>

</style>

Closable

Use closable to show close icon and close message.

<script setup lang='ts'>
import { OMessage } from 'onu-ui'
const open1 = () => {
  OMessage({
    content: 'This is a primary message',
    type: 'primary',
    closable: true,
  })
}

const open2 = () => {
  OMessage({
    content: 'This is a secondary message',
    type: 'secondary',
    closable: true,

  })
}
const open3 = () => {
  OMessage({
    content: 'This is a success message',
    type: 'success',
    closable: true,

  })
}
const open4 = () => {
  OMessage({
    content: 'This is a warning message',
    type: 'warning',
    closable: true,

  })
}
const open5 = () => {
  OMessage({
    content: 'This is a error message',
    type: 'error',
    closable: true,

  })
}
const open6 = () => {
  OMessage({
    content: 'This is a info message',
    type: 'info',
    closable: true,

  })
}
</script>

<template>
  <div fscw gap-2>
    <o-button type="primary" @click="open1">
      primary
    </o-button>
    <o-button type="secondary" @click="open2">
      secondary
    </o-button>
    <o-button type="success" @click="open3">
      success
    </o-button>
    <o-button type="warning" @click="open4">
      warning
    </o-button>
    <o-button type="error" @click="open5">
      error
    </o-button>
    <o-button type="info" @click="open6">
      info
    </o-button>
  </div>
</template>

<style>

</style>

<script setup lang='ts'>
import { OMessage } from 'onu-ui'
const open1 = () => {
  OMessage({
    content: 'This is a primary message',
    type: 'primary',
    closable: true,
  })
}

const open2 = () => {
  OMessage({
    content: 'This is a secondary message',
    type: 'secondary',
    closable: true,

  })
}
const open3 = () => {
  OMessage({
    content: 'This is a success message',
    type: 'success',
    closable: true,

  })
}
const open4 = () => {
  OMessage({
    content: 'This is a warning message',
    type: 'warning',
    closable: true,

  })
}
const open5 = () => {
  OMessage({
    content: 'This is a error message',
    type: 'error',
    closable: true,

  })
}
const open6 = () => {
  OMessage({
    content: 'This is a info message',
    type: 'info',
    closable: true,

  })
}
</script>

<template>
  <div fscw gap-2>
    <o-button type="primary" @click="open1">
      primary
    </o-button>
    <o-button type="secondary" @click="open2">
      secondary
    </o-button>
    <o-button type="success" @click="open3">
      success
    </o-button>
    <o-button type="warning" @click="open4">
      warning
    </o-button>
    <o-button type="error" @click="open5">
      error
    </o-button>
    <o-button type="info" @click="open6">
      info
    </o-button>
  </div>
</template>

<style>

</style>

Custom Icon

Use icon to show icon before content

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
function handleToClickBasic(theme: string, icon: string) {
  message[theme]({
    content: `This is ${theme} message`,
    closable: true,
    icon,
  })
}
</script>

<template>
  <div space-y-2>
    <div fscw gap-2>
      <o-button type="secondary" @click="handleToClickBasic('secondary', 'i-eos-icons:loading')">
        <o-icon name="i-eos-icons:loading" class="!text-white text-2xl" />
      </o-button>
      <o-button type="error" @click="handleToClickBasic('error', 'i-carbon:logo-youtube')">
        <o-icon name="i-carbon:logo-youtube" class="!text-white text-2xl" />
      </o-button>
      <o-button type="success" @click="handleToClickBasic('success', 'i-carbon:logo-python')">
        <o-icon name="i-carbon:logo-python" class="!text-white text-2xl" />
      </o-button>
      <o-button type="info" @click="handleToClickBasic('info', 'i-carbon-bee')">
        <o-icon name="i-carbon-bee" class="!text-white text-2xl" />
      </o-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
function handleToClickBasic(theme: string, icon: string) {
  message[theme]({
    content: `This is ${theme} message`,
    closable: true,
    icon,
  })
}
</script>

<template>
  <div space-y-2>
    <div fscw gap-2>
      <o-button type="secondary" @click="handleToClickBasic('secondary', 'i-eos-icons:loading')">
        <o-icon name="i-eos-icons:loading" class="!text-white text-2xl" />
      </o-button>
      <o-button type="error" @click="handleToClickBasic('error', 'i-carbon:logo-youtube')">
        <o-icon name="i-carbon:logo-youtube" class="!text-white text-2xl" />
      </o-button>
      <o-button type="success" @click="handleToClickBasic('success', 'i-carbon:logo-python')">
        <o-icon name="i-carbon:logo-python" class="!text-white text-2xl" />
      </o-button>
      <o-button type="info" @click="handleToClickBasic('info', 'i-carbon-bee')">
        <o-icon name="i-carbon-bee" class="!text-white text-2xl" />
      </o-button>
    </div>
  </div>
</template>

Duration

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

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
function handleToClickBasic(theme: string, time: number) {
  message[theme]({
    content: 'this is basic content',
    closable: true,
    duration: time,
  })
}
</script>

<template>
  <div space-y-2>
    <div fscw gap-2>
      <o-button type="primary" @click="handleToClickBasic('primary', 3000)">
        show 3.0 s
      </o-button>
      <o-button type="secondary" @click="handleToClickBasic('secondary', 4000)">
        show 4.0 s
      </o-button>
      <o-button type="info" @click="handleToClickBasic('info', 5000)">
        show 5.0 s
      </o-button>
    </div>
    <div fscw gap-2>
      <o-button type="error" @click="handleToClickBasic('error', 6000)">
        show 6.0 s
      </o-button>
      <o-button type="success" @click="handleToClickBasic('success', 7000)">
        show 7.0 s
      </o-button>
      <o-button type="warning" @click="handleToClickBasic('warning', 8000)">
        show 8.0 s
      </o-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
function handleToClickBasic(theme: string, time: number) {
  message[theme]({
    content: 'this is basic content',
    closable: true,
    duration: time,
  })
}
</script>

<template>
  <div space-y-2>
    <div fscw gap-2>
      <o-button type="primary" @click="handleToClickBasic('primary', 3000)">
        show 3.0 s
      </o-button>
      <o-button type="secondary" @click="handleToClickBasic('secondary', 4000)">
        show 4.0 s
      </o-button>
      <o-button type="info" @click="handleToClickBasic('info', 5000)">
        show 5.0 s
      </o-button>
    </div>
    <div fscw gap-2>
      <o-button type="error" @click="handleToClickBasic('error', 6000)">
        show 6.0 s
      </o-button>
      <o-button type="success" @click="handleToClickBasic('success', 7000)">
        show 7.0 s
      </o-button>
      <o-button type="warning" @click="handleToClickBasic('warning', 8000)">
        show 8.0 s
      </o-button>
    </div>
  </div>
</template>

Use HTML string

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

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
const open = () => {
  message({
    parseHtml: true,
    content: '<strong>This is <i>HTML</i> string</strong>',
  })
}
</script>

<template>
  <o-button @click="open">
    Use HTML String
  </o-button>
</template>

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
const open = () => {
  message({
    parseHtml: true,
    content: '<strong>This is <i>HTML</i> string</strong>',
  })
}
</script>

<template>
  <o-button @click="open">
    Use HTML String
  </o-button>
</template>

Global Methods

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

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()

composition API: OMessage

html

<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>

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
</script>

<template>
  <div fscw gap-2>
    <o-button light @click="$message.success('This is a success message')">
      Option API
    </o-button>
    <o-button light o-secondary @click="message.success('This is a success message')">
      Composition API
    </o-button>
  </div>
</template>

<script lang="ts" setup>
import { OMessage as message } from 'onu-ui'
</script>

<template>
  <div fscw gap-2>
    <o-button light @click="$message.success('This is a success message')">
      Option API
    </o-button>
    <o-button light o-secondary @click="message.success('This is a success message')">
      Composition API
    </o-button>
  </div>
</template>

Message Props

Name	Type	Default	Description
content	`string`	`undefined`	Message content.
type	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'primary'`	Message theme.
closable	`boolean`	`false`	Whether the message can be closed.
icon	`string`	`undefined`	Customize message icon.
parseHtml	`boolean`	`false`	Whether message is treated as HTML string.
duration	`number`	`3000`	Display duration, millisecond. If set to 0, it will not turn off automatically.
on-close	`function`	`undefined`	Callback function when closed with the message instance as the parameter.
offset	`number`	`20`	Set the distance to the top of viewport.
zIndex	`number`	`0`	Set the zIndex of Message.

Message methods

Name	Parameters	Description
close	`() => void`	Triggers when the message was closed.

Message UPDATED #

Basic usage #

Types #

Closable #

Custom Icon #

Duration #

Use HTML string #

Global Methods #

Message Props #

Message methods #