MMCAT UI

Appearance

Message 消息提示 ​

常用于主动操作后的反馈提示。

基本使用 ​

从顶部出现，3 秒后自动消失。

TIP

MMCAT-UI 还注册了一个全局的 $message 方法用于调用。

import { getCurrentInstance } from "vue";

const instance = getCurrentInstance();

const $message = instance?.appContext.config.globalProperties.$message;

Show Code
vue
<script setup lang="ts">
import { McMessage } from "mmcat-ui";

const show1 = () => {
  McMessage({
    type: "info",
    message: "this is a message",
    duration: 3000,
  });
};
</script>

<template>
  <div class="item">
    <mc-button type="info" @click="show1">Show message</mc-button>
  </div>
</template>
<script setup lang="ts">
import { McMessage } from "mmcat-ui";

const show1 = () => {
  McMessage({
    type: "info",
    message: "this is a message",
    duration: 3000,
  });
};
</script>

<template>
  <div class="item">
    <mc-button type="info" @click="show1">Show message</mc-button>
  </div>
</template>

不同状态 ​

用来显示「成功、警告、危险、消息」类的操作反馈

当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为 info。 此时正文内容以 message 的值传入。

Show Code
vue
<template>
  <div class="item">
    <mc-button type="success" @click="show1">success</mc-button>
    <mc-button type="warning" @click="show2">warning</mc-button>
    <mc-button type="danger" @click="show3">danger</mc-button>
    <mc-button type="info" @click="show4">info</mc-button>
  </div>
</template>

<script setup lang="ts">
import { McMessage } from "mmcat-ui";

const show1 = () => {
  McMessage({
    type: "success",
    message: "Congrats, this is a success message",
    duration: 3000,
  });
};
const show2 = () => {
  McMessage({
    type: "warning",
    message: "Warning, this is a warning message.",
    duration: 3000,
  });
};
const show3 = () => {
  McMessage({
    type: "danger",
    message: "Oops, this is a danger message.",
    duration: 3000,
  });
};
const show4 = () => {
  McMessage({
    type: "info",
    message: "this is a message.",
    duration: 3000,
  });
};
</script>
<template>
  <div class="item">
    <mc-button type="success" @click="show1">success</mc-button>
    <mc-button type="warning" @click="show2">warning</mc-button>
    <mc-button type="danger" @click="show3">danger</mc-button>
    <mc-button type="info" @click="show4">info</mc-button>
  </div>
</template>

<script setup lang="ts">
import { McMessage } from "mmcat-ui";

const show1 = () => {
  McMessage({
    type: "success",
    message: "Congrats, this is a success message",
    duration: 3000,
  });
};
const show2 = () => {
  McMessage({
    type: "warning",
    message: "Warning, this is a warning message.",
    duration: 3000,
  });
};
const show3 = () => {
  McMessage({
    type: "danger",
    message: "Oops, this is a danger message.",
    duration: 3000,
  });
};
const show4 = () => {
  McMessage({
    type: "info",
    message: "this is a message.",
    duration: 3000,
  });
};
</script>

全局方法 ​

MMCAT-UI 为 app.config.globalProperties 添加了全局方法 $message。 因此在 vue 实例中你可以使用当前页面中的调用方式调用 Message

单独引用 ​

vue
import { McMessage } from "mmcat-ui";
import { McMessage } from "mmcat-ui";

API ​

Message 配置项 ​

属性名说明类型默认值
message消息文字stringinfo
type消息类型 'success' | 'warning' |'danger' | 'info'—
duration显示时间number3000