全局提示 Message

全局展示操作反馈信息

基本使用

可提供成功、警告和错误等反馈信息
顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式

Show Code

vue

<template>
  <n-button @click="openMsg">消息提示</n-button>
</template>
<script setup lang="ts">
import { NMessage } from '../../../packages/components/message'
const openMsg = () => {
  NMessage({
    text: '默认消息提示',
    timeOut: 3000,
  })
}
</script>

不同状态

可根据 Message 参数的 type 来定义显示不同的状态。

Show Code

vue

<template>
  <n-button @click="openInfo">文本状态</n-button>
  <n-button @click="openSuccess">成功状态</n-button>
  <n-button @click="openWarn">警告状态</n-button>
  <n-button @click="openError">错误状态</n-button>
  <n-button @click="openCustom">自定义</n-button>
</template>

<script setup lang="ts">
import { NMessage } from '../../../packages/components/message' //此处为本地示例，请使用import {NMessage} from "vite-nice-ui";引入

const openInfo = () => {
  NMessage({
    type: 'info',
    text: '文本消息提示!',
  })
}
const openSuccess = () => {
  NMessage({
    type: 'success',
    text: '成功状态消息提示!',
  })
}
const openWarn = () => {
  NMessage({
    type: 'warn',
    text: '警告状态消息提示!',
  })
}
const openError = () => {
  NMessage({
    type: 'error',
    text: '错误状态消息提示!',
  })
}
const openCustom = () => {
  NMessage({
    type: 'custom',
    text: '自定义消息弹窗样式',
    icon: 'chrome',
    textColor: '#000',
    bgColor: '#e19af3',
  })
}
</script>

自定义配置

可根据不同场景自定义 icon 图标及 timeout 消失时间。

消息提示

5秒后消失

Show Code

vue

<template>
  <n-button @click="openMsg1">消息提示</n-button>
  <n-button @click="openMsg2">5秒后消失</n-button>
</template>
<script setup lang="ts">
import { NMessage } from '../../../packages/components/message'
const openMsg1 = () => {
  NMessage({
    text: '自定义Icon！',
    icon: 'codepen',
  })
}
const openMsg2 = () => {
  NMessage({
    text: '5秒后消失！',
    icon: 'clock',
    timeOut: 3000,
  })
}
</script>

API

参数	类型	默认值	可选值	说明
text	String	VNode	——	——
type	String	info	info / warn / error / success / custom	消息提示类型
icon	String	——	参考图标库	消息提示Icon图标
timeout	String	2500	——	消息提示框消失时间（单位：毫秒ms）
textColor	String	——	——	文本颜色，type 为 custom 时有效
bgColor	String	——	——	背景颜色，type 为 custom 时有效
customClass	String	——	——	自定义组件类名

全局提示 Message ​

基本使用 ​

不同状态 ​

自定义配置 ​

API ​

全局提示 Message

基本使用

不同状态

自定义配置

API