Mini Message(微型消息)

这是 MiniMsg (微型消息)组件的文档。

基础用法

MiniMsg注册了一个全局方法 $seMiniMsg，也可以单独引入。

从 selab-ui 引入

import { SeMiniMsg } from 'selab-ui';

MiniMsg 方法接受一个 option对象 作为其参数，通过设置其 message 属性设置文本内容。

     

基本使用

<template>
  <se-button @click="msg('success')">success</se-button>
  &nbsp;
  <se-button @click="msg('info')">info</se-button>
  &nbsp;
  <se-button @click="msg('warning')">warning</se-button>
  &nbsp;
  <se-button @click="msg('danger')">danger</se-button>
</template>

<script setup lang="ts">
import { SeMiniMsg } from "selab-ui";

const position = {
  success: {
    x: "20vw",
    y: "10vh",
  },
  info: {
    x: "80vw",
    y: "90vh",
  },
  warning: {
    x: "20vw",
    y: "90vh",
  },
  danger: {
    x: "80vw",
    y: "10vh",
  },
} as const;

function msg(type: "success" | "info" | "warning" | "danger") {
  SeMiniMsg({
    type: type,
    message: `This is a ${type} message`,
    duration: 3000,
    location: {
      x: position[type].x,
      y: position[type].y,
    },
  });
}
</script>

只能同时存在一个 Mini Message 实例。

当呼出多个时，旧的消息会立刻关闭。

Mini Message API

Mini Message Attributes

参数名	类型	默认值	描述	跳转 Demo
type	'info' | 'success' | 'danger' | 'warning'	'info'	消息类型	基础用法
message	string		消息内容	基础用法
duration	number	1000(ms)	持续时长	基础用法
location	{ x: string | number; y: string | number }	{ x: '50%', y: '50%' }	显示位置(相对挂载位置)	基础用法
root	HTMLElement	Document.documentElement	挂载节点	基础用法