Message Prompt

It is often used as a feedback prompt after active operations. The difference with Notification is that the latter is more of a passive reminder for system-level notifications.

Basic usage

It appears from the top and disappears after 3 seconds.

Message is very similar in configuration to Notifications, so some of the options are not explained here.

<template>
    <div>
        <kl-button @click="handleClick()" plain>Show Message</kl-button>
        <kl-button @click="vNodeClick()" plain>VNode</kl-button>
    </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { KlMessage } from '@kunlun-design/components'
const handleClick = () => {
    KlMessage({ content: 'This is a message' })
}
const vNodeClick = () => {
    KlMessage({
        content: h('p', null, [
            h('span', null, 'Message can be '),
            h('i', { style: 'color:teal' }, ' VNode')
        ])
    })
}
</script>

<style scoped>
button {
    margin-bottom: 20px;
}
</style>

Different states

Used to display operational feedback for the [Success, Warning, Message, Error] class.

Message can also interface an object as an argument when more properties need to be customized.

For example, setting the type field can define different states, defaulting to info. The body content is passed in with the value message.

We have also registered methods for the various types of Message that can be called without passing the type field.

<template>
    <div>
        <kl-button type="success" @click="handleClick(0)" plain>Message Success</kl-button>
        <kl-button type="warning" @click="handleClick(1)" plain>Message Warning</kl-button>
        <kl-button type="danger" @click="handleClick(2)" plain>Message error</kl-button>
        <kl-button type="info" @click="handleClick(3)" plain>Message info</kl-button>
    </div>
</template>

<script setup lang="ts">
import { KlMessage } from '@kunlun-design/components'
const handleClick = (type: number) => {
    switch (type) {
        case 0:
            KlMessage.success('This is a success message', 5000)
            break
        case 1:
            KlMessage.warning('This is a warning message', 5000)
            break
        case 2:
            KlMessage.error('This is a error message', 5000)
            break
        case 3:
            KlMessage.text('This is a normal message', 5000)
    }
}
</script>

<style scoped>
button {
    margin-bottom: 20px;
}
</style>

Message prompt that can be turned off

Can be used to add a close button

The default Message cannot be manually closed. If you need to turn the function off manually, you can set close to true. Message has a controlled duration with a default shutdown time of 3000 ms. Setting this property to 0 means that the message will not be automatically closed.

<template>
    <div>
        <kl-button type="success" @click="handleClick(0)" plain>Message Success</kl-button>
        <kl-button type="warning" @click="handleClick(1)" plain>Message Warning</kl-button>
        <kl-button type="danger" @click="handleClick(2)" plain>Message error</kl-button>
        <kl-button type="info" @click="handleClick(3)" plain>Message info</kl-button>
    </div>
</template>

<script setup lang="ts">
import { KlMessage } from '@kunlun-design/components'
const handleClick = (type: number) => {
    switch (type) {
        case 0:
            KlMessage.success('This is a success message', 0, true)
            break
        case 1:
            KlMessage.warning('This is a warning message', 0, true)
            break
        case 2:
            KlMessage.error('This is a error message', 0, true)
            break
        case 3:
            KlMessage.text('This is a normal message', 0, true)
    }
}
</script>

<style scoped>
button {
    margin-bottom: 20px;
}
</style>

Scrollable message prompt

Can be used to display very long message prompt text content

The default Message does not support text scrolling, and when text goes beyond the message prompt, it is hidden as ..., you can set scroll to true. Message automatically scrolls based on the actual length of the text.

Of course, Message will decide for itself, so even if you set scroll to true, as long as the text doesn't exceed the Message box it won't scroll, so Message will run.

With scroll set to true, duration will be the length of the scroll animation, at which point the text will remain stationary for 2000ms before the scroll begins, 1000ms after the scroll animation ends, and then disappear.

Note: Test this feature on Windows with narrow width dimensions, and it is not recommended that the text be too long. Other notification prompt components can be used for long text

<template>
    <div>
        <kl-button @click="handleClick(0)" plain>Message</kl-button>
        <kl-button @click="handleClick(1)" plain>Message Scroll</kl-button>
        <kl-button @click="handleClick(2)" plain>Message Scroll Close</kl-button>
    </div>
</template>

<script setup lang="ts">
import { KlMessage } from '@kunlun-design/components'
const handleClick = (type: number) => {
    switch (type) {
        case 0:
            KlMessage({
                content:
                    'If the length is insufficient, Message will automatically scroll the actual length of the text.',
                duration: 5000
            })
            break
        case 1:
            KlMessage({
                content:
                    'If the length is insufficient, Message will automatically scroll the actual length of the text.',
                scroll: true,
                duration: 5000
            })
            break
        case 2:
            KlMessage.text(
                'If the length is insufficient, Message will automatically scroll the actual length of the text.',
                5000,
                true,
                true
            )
            break
    }
}
</script>

<style scoped>
button {
    margin-bottom: 20px;
}
</style>

Attribute

attribute	description	type	optional	default
success	Success message
error	Error prompt
warning	Warning prompt
text	General prompt
type	Prompt type	string	success\|error\|warning\|text	text
duration	Prompt duration	number		3000
close	Whether the close button is displayed	boolean		false
scroll	Whether out-of-roll is supported	boolean		false

Message Prompt #

Basic usage #

Different states #

Message prompt that can be turned off #

Scrollable message prompt #

Attribute #