Message 全局提示

顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

代码演示

普通提示

<template>
  <z-button type="primary" @click="createMsg">创建一条消息</z-button>
</template>

<script setup lang="ts">
import { Message } from "@d7ee/z-base-ui";

const createMsg = () => {
  Message.info("This is a normal message");
};
</script>

<style scoped>

</style>

修改延时

自定义消息停留时长为 10s ，默认 3s。

<template>
  <z-button type="primary" @click="createMsg">创建一条信息10s后关闭</z-button>
</template>

<script setup lang="ts">
import { Message } from "@d7ee/z-base-ui";

const createMsg = () => {
  Message.info("This is a normal message", 10000);
};
</script>

<style scoped>

</style>

各类型提示

成功 、信息、警告、失败。

<template>
  <z-button type="primary" @click="createMsg('info')">info message</z-button>
  <z-button type="success" @click="createMsg('success')">success message</z-button>
  <z-button type="danger" @click="createMsg('error')">error message</z-button>
  <z-button type="warning" @click="createMsg('warning')">warning message</z-button>
</template>

<script setup lang="ts">
import { Message } from "@d7ee/z-base-ui";

const createMsg = (type: string) => {
  Message[type](`This is a ${type} message`);
};
</script>

<style scoped>

</style>

取消icon

<template>
  <z-button type="primary" @click="createMsg('info')">info message</z-button>
  <z-button type="success" @click="createMsg('success')">success message</z-button>
  <z-button type="danger" @click="createMsg('error')">error message</z-button>
  <z-button type="warning" @click="createMsg('warning')">warning message</z-button>
</template>

<script setup lang="ts">
import { Message } from "@d7ee/z-base-ui";

const createMsg = (type: string) => {
  Message({
    message: `This is a ${type} message`,
    type,
    showIcon: false
  });
};
</script>

<style scoped>

</style>

手动关闭

<template>
  <z-button type="primary" @click="createMsg">创建一条可被关闭的消息</z-button>
</template>

<script setup lang="ts">
import { Message } from "@d7ee/z-base-ui";

const createMsg = () => {
  Message({
    message: "This is a message that can be closed",
    showClose: true
  });
};
</script>

<style scoped>

</style>

自定义内容

<template>
  <z-button type="primary" @click="createMsg">创建一条自定义消息</z-button>
</template>

<script setup lang="ts">
import { Message } from "@d7ee/z-base-ui";
import { h } from "vue";

const createMsg = () => {
  Message({
    message: h("div", {
      style: {
        color: "red"
      }
    }, "This is a custom message"),
    showIcon: false
  });
};
</script>

<style scoped>

</style>

使用方法

单独引入 Message:

import { Message } from "z-base-ui-plus";

/**
 * @param { Object | string | VNode } messgae 消息内容
 * @param { number } duration 停留时长，可选参数，默认3s，单位毫秒
 * @description 快速调用
 * */
Message.success("消息内容");

// 完全体调用
Message(options);

此时调用方法为 Message(options)。 此处也为每个 type 定义了各自的方法，如 Message.success("msg")。 并且可以使用按键 Esc 快速关闭所有消息。

message 配置项

属性名	说明	类型	默认值
message 必填	消息文字	string | VNode	—
duration	停留时长，0 时永不关闭，单位毫秒	number	3000
showClose	允许用户主动关闭消息	boolean	false
type	消息类型	success | info | warning | error	—
showIcon	显示预设图标	boolean	true
offset	每个消息之间的间距	number	20