Message 全局提示

全局展示操作反馈信息。

基本用法

使用 Message.info | Message.success | Message.warning | Message.error 来显示对应类型的全局提示。

<template>
  <div className="idesign-demo-block-row">
    <i-button type="primary" @click="() => this.$message.info('这是一条默认提示')">
      默认提示
    </i-button>
    <i-button type="success" @click="() => this.$message.success('这是一条成功提示')">
      成功提示
    </i-button>
    <i-button type="warning" @click="() => this.$message.warning('这是一条警告提示')">
      警告提示
    </i-button>
    <i-button type="error" @click="() => this.$message.error('这是一条错误提示')">
      错误提示
    </i-button>
  </div>
</template>

<script setup></script>

显示代码复制代码复制代码

设置提示持续时间

可通过第二个参数来设置提示持续的时间，默认为 3，当设为 0 时保持提示不关闭。

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => this.$message.info('这是一条不关闭的提示', 0)">
      提示不关闭
    </i-button>
    <i-button @click="() => this.$message.success('这是一条持续 2 秒的提示', 2)">
      提示 2 秒后关闭
    </i-button>
    <i-button @click="() => this.$message.warning('这是一条持续 10 秒的提示', 10)">
      提示 10 秒后关闭
    </i-button>
  </div>
</template>

<script setup></script>

显示代码复制代码复制代码

设置提示展示位置

可通过第三个参数来设置提示出现的位置，默认为 top。

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => this.$message.info('这是一条顶部提示', 3, 'top')">
      顶部的提示
    </i-button>
    <i-button @click="() => this.$message.info('这是一条底部提示', 3, 'bottom')">
      底部的提示
    </i-button>
  </div>
</template>

<script setup></script>

显示代码复制代码复制代码

手动关闭所有提示

可通过 Message.clear() 来关闭所有提示。

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => this.$message.clear()">
      关闭所有提示
    </i-button>
    <i-button @click="() => this.$message.clear('top')">
      关闭所有顶部提示
    </i-button>
    <i-button @click="() => this.$message.clear('bottom')">
      关闭所有底部提示
    </i-button>
  </div>
</template>

<script setup></script>

显示代码复制代码复制代码

传入配置的用法

除上述方式外，也可以传入 { content: "这是一条成功提示", duration: 5000 } 对象来使用全局提示。

<template>
  <div className="idesign-demo-block-row">
    <i-button
      @click="() => this.$message.info({ content: '这是一条默认提示' })"
    >
      默认提示
    </i-button>
    <i-button
      @click="
        () =>
          this.$message.info({
            content: '这是一条持续 10 秒的提示',
            duration: 10,
            position: 'bottom'
          })
      "
    >
      提示 10 秒后关闭
    </i-button>
  </div>
</template>

<script setup></script>

显示代码复制代码复制代码

自定义提示内容

可传入创建的 VNode 来展示自定义提示：

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => this.$message.info(a)">
      自定义提示内容（默认）
    </i-button>
    <i-button
      @click="
        () =>
          this.$message.info({
            content: b
          })
      "
    >
      自定义提示内容（配置项）
    </i-button>
  </div>
</template>

<script setup>
import { h } from 'vue'
import { Button } from 'idesign-vue'

const a = h('button', '这是提示的内容')
const b = h(Button, '自定义组件内容')
</script>

显示代码复制代码复制代码

Message 方法

属性	说明	类型
info	显示信息提示	MessageMethod
success	显示成功提示	MessageMethod
warning	显示警告提示	MessageMethod
error	显示错误提示	MessageMethod
clear	清除全部提示	(position?: PositionType) => void

type MessageMethod = (
  messageConfig: string | VNodeTypes | MessageConfigType,
  duration?: number,
  position?: PositionType,
  closeable?: boolean
) => void;

type PositionType = 'top' | 'bottom';

Message 配置项

属性	说明	类型	默认值
content	提示内容	string〡VNodeTypes	--
duration	消息持续时间，单位秒	number	3
position	提示位置	PositionType	top