Tu View PlusMessage
Used to show feedback after an activity.
Methods
Global method：Tu View Plus has added a global method $message for app.config.globalProperties. So in a vue instance you can call Message like what we did in this page.
Local import：in this case you should call TuMessage(options). We have also registered methods for different types, e.g. TuMessage.success(options). You can call TuMessage.closeAll() to manually close all the instances.
Basic usage
Displays at the top, and disappears after 3 seconds.
<template>
<tu-button @click="open">Local import</tu-button>
<tu-button @click="openGlobal">Global method</tu-button>
<tu-button @click="openVn">VNode</tu-button>
</template>
<script lang="ts" setup>
import { h, getCurrentInstance } from 'vue';
import { TuMessage } from 'tu-view-plus';
const vm = getCurrentInstance()!;
const { $message } = vm.appContext.config.globalProperties;
const open = () => {
TuMessage('This is a message.');
};
const openGlobal = () => {
$message('This is a message.');
};
const openVn = () => {
TuMessage({
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, ' VNode')
])
});
};
</script><template>
<tu-button @click="open">Local import</tu-button>
<tu-button @click="openGlobal">Global method</tu-button>
<tu-button @click="openVn">VNode</tu-button>
</template>
<script lang="ts" setup>
import { h, getCurrentInstance } from 'vue';
import { TuMessage } from 'tu-view-plus';
const vm = getCurrentInstance()!;
const { $message } = vm.appContext.config.globalProperties;
const open = () => {
TuMessage('This is a message.');
};
const openGlobal = () => {
$message('This is a message.');
};
const openVn = () => {
TuMessage({
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, ' VNode')
])
});
};
</script>Types
Used to show the feedback of Success, Warning, Message and Error activities.
<template>
<tu-button @click="openDefault">default</tu-button>
<tu-button type="success" @click="openSuccess">success</tu-button>
<tu-button type="danger" @click="openError">error</tu-button>
<tu-button type="warning" @click="openWarning">warning</tu-button>
<tu-button type="info" @click="openInfo">info</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const openDefault = () => {
TuMessage('This is a default message.');
};
const openSuccess = () => {
TuMessage.success('This is a success message.');
};
const openError = () => {
TuMessage.error('This is a error message.');
};
const openWarning = () => {
TuMessage.warning('This is a warning message.');
};
const openInfo = () => {
TuMessage.info('This is a info message.');
};
</script><template>
<tu-button @click="openDefault">default</tu-button>
<tu-button type="success" @click="openSuccess">success</tu-button>
<tu-button type="danger" @click="openError">error</tu-button>
<tu-button type="warning" @click="openWarning">warning</tu-button>
<tu-button type="info" @click="openInfo">info</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const openDefault = () => {
TuMessage('This is a default message.');
};
const openSuccess = () => {
TuMessage.success('This is a success message.');
};
const openError = () => {
TuMessage.error('This is a error message.');
};
const openWarning = () => {
TuMessage.warning('This is a warning message.');
};
const openInfo = () => {
TuMessage.info('This is a info message.');
};
</script>Closable
A default Message cannot be closed manually. If you need a closable message, you can set showClose field. Message has a controllable duration. Default duration is 3000 ms, and it won not disappear when set to 0.
<template>
<tu-button @click="openDefault">default</tu-button>
<tu-button type="success" @click="openSuccess">success</tu-button>
<tu-button type="danger" @click="openError">error</tu-button>
<tu-button type="warning" @click="openWarning">warning</tu-button>
<tu-button type="info" @click="openInfo">info</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const openDefault = () => {
TuMessage({
showClose: true,
duration: 0,
message:
'This is a default message that will not automatically close, needs to be manually closed.'
});
};
const openSuccess = () => {
TuMessage({
showClose: true,
message: 'This is a success message.',
type: 'success'
});
};
const openError = () => {
TuMessage({
showClose: true,
message: 'This is a error message.',
type: 'error'
});
};
const openWarning = () => {
TuMessage({
showClose: true,
message: 'This is a warning message.',
type: 'warning'
});
};
const openInfo = () => {
TuMessage({
showClose: true,
message: 'This is a info message.',
type: 'info'
});
};
</script><template>
<tu-button @click="openDefault">default</tu-button>
<tu-button type="success" @click="openSuccess">success</tu-button>
<tu-button type="danger" @click="openError">error</tu-button>
<tu-button type="warning" @click="openWarning">warning</tu-button>
<tu-button type="info" @click="openInfo">info</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const openDefault = () => {
TuMessage({
showClose: true,
duration: 0,
message:
'This is a default message that will not automatically close, needs to be manually closed.'
});
};
const openSuccess = () => {
TuMessage({
showClose: true,
message: 'This is a success message.',
type: 'success'
});
};
const openError = () => {
TuMessage({
showClose: true,
message: 'This is a error message.',
type: 'error'
});
};
const openWarning = () => {
TuMessage({
showClose: true,
message: 'This is a warning message.',
type: 'warning'
});
};
const openInfo = () => {
TuMessage({
showClose: true,
message: 'This is a info message.',
type: 'info'
});
};
</script>Centered text
Use the center attribute to center the text.
<template>
<tu-button @click="open">Centered text</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
center: true,
message: 'This is a message.'
});
};
</script><template>
<tu-button @click="open">Centered text</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
center: true,
message: 'This is a message.'
});
};
</script>Custom icon
Use the icon attribute to set header icon.
<template>
<tu-button @click="open">Custom icon</tu-button>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
message: 'This is a message.',
icon: Search
});
};
</script><template>
<tu-button @click="open">Custom icon</tu-button>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
message: 'This is a message.',
icon: Search
});
};
</script>Use HTML string
Set dangerouslyUseHTMLString to true and message will be treated as an HTML string.
<template>
<tu-button @click="open">Use HTML</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
dangerouslyUseHTMLString: true,
message: '<span>This is a <i style="color: teal">HTML</i> string</span>'
});
};
</script><template>
<tu-button @click="open">Use HTML</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
dangerouslyUseHTMLString: true,
message: '<span>This is a <i style="color: teal">HTML</i> string</span>'
});
};
</script>Grouping
Set grouping to true and the same content of message will be merged.
<template>
<tu-button @click="open">Grouping</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
grouping: true,
message: 'This is a message.'
});
};
</script><template>
<tu-button @click="open">Grouping</tu-button>
</template>
<script lang="ts" setup>
import { TuMessage } from 'tu-view-plus';
const open = () => {
TuMessage({
grouping: true,
message: 'This is a message.'
});
};
</script>Message API
Message Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| message | Message text | String VNode Function | - |
| type | Message type | String | '' |
| icon | Custom icon component | String Component | - |
| dangerouslyUseHTMLString | Whether message is treated as HTML string | Boolean | false |
| customClass | Custom class name for Message | String | '' |
| duration | Display duration, millisecond. If set to 0, it will not turn off automatically | Number | - |
| showClose | Whether to show a close button | Boolean | false |
| center | Whether to center the text | Boolean | false |
| onClose | Callback function when closed with the message instance as the parameter | Function | - |
| offset | Set the distance to the top of viewport | Number | 16 |
| appendTo | Set the root element for the message, default to document.body | String HTMLElement | - |
| grouping | Merge messages with the same content, type of VNode message is not supported | Boolean | false |
| repeatNum | The number of repetitions, similar to badge, is used as the initial number when used with grouping | Number | 1 |
Message Events
Message and this.$message returns the current Message instance. To manually close the instance, you can call close on it.
| Name | Description | Type |
|---|---|---|
| close | Close the Message | Function |