nano-ui

Message 消息提示 ​

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法 ​

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

<script lang="ts" setup>
import { h } from 'vue';
import { NMessage } from './../../../packages/components/message/index';

const open = () => {
  NMessage('This is a message.');
};

const openVn = () => {
  NMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  });
};
</script>

<template>
  <n-button :plain="true" @click="open">Show message</n-button>
  <n-button :plain="true" @click="openVn">VNode</n-button>
</template>

不同类型 ​

用来显示「成功、警告、消息、错误」类的操作反馈。通过 type 属性来配置。

<script lang="ts" setup>
import { NMessage } from 'nano-ui-vue';

const open1 = () => {
  NMessage('This is a message.');
};
const open2 = () => {
  NMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  });
};
const open3 = () => {
  NMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
  });
};
const open4 = () => {
  NMessage.error('Oops, this is a error message.');
};
</script>

<template>
  <n-button :plain="true" @click="open2">Success</n-button>
  <n-button :plain="true" @click="open3">Warning</n-button>
  <n-button :plain="true" @click="open1">Message</n-button>
  <n-button :plain="true" @click="open4">Error</n-button>
</template>

可关闭的消息 ​

默认的 Message 是不可以被人工关闭的。如果你需要手动关闭功能，你可以把 showClose 设置为 true。此外，Message 拥有可控的 duration，默认的关闭时间为 3000 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

<script lang="ts" setup>
import { NMessage } from 'nano-ui-vue';

const open1 = () => {
  NMessage({
    showClose: true,
    message: 'This is a message.',
  });
};
const open2 = () => {
  NMessage({
    showClose: true,
    message: 'Congrats, this is a success message.',
    type: 'success',
  });
};
const open3 = () => {
  NMessage({
    showClose: true,
    message: 'Warning, this is a warning message.',
    type: 'warning',
  });
};
const open4 = () => {
  NMessage({
    showClose: true,
    message: 'Oops, this is a error message.',
    type: 'danger',
  });
};
</script>

<template>
  <n-button :plain="true" @click="open1">Message</n-button>
  <n-button :plain="true" @click="open2">Success</n-button>
  <n-button :plain="true" @click="open3">Warning</n-button>
  <n-button :plain="true" @click="open4">Error</n-button>
</template>

文字居中 ​

使用 center 属性让文字水平居中。

<script lang="ts" setup>
import { NMessage } from 'nano-ui-vue';

const openCenter = () => {
  NMessage({
    showClose: true,
    message: 'Centered text',
    center: true,
  });
};
</script>

<template>
  <n-button plain @click="openCenter">Centered text</n-button>
</template>

使用方式 ​

全局方法 ​

Message 组件提供了全局方法 $message，在 Vue 实例中可以作为 this.$message 使用。

ts
// 挂载全局方法
app.use(NanoUI);

// 使用方式
this.$message('这是一条消息提示');

// 或者
this.$message({
  message: '这是一条消息提示',
  type: 'success',
});

单独引用 ​

ts
import { NMessage } from 'nano-ui-vue';

// 基础用法
NMessage('这是一条消息提示');

// 成功提示
NMessage.success('这是一条成功消息');

// 警告提示
NMessage.warning('这是一条警告消息');

// 错误提示
NMessage.error('这是一条错误消息');

// 配置选项
NMessage({
  message: '这是一条消息提示',
  type: 'success',
  duration: 5000,
  showClose: true,
});

API ​

Message Options ​

名称说明类型默认值
message消息文字string | VNode-
type消息类型'success' | 'warning' | 'info' | 'error''info'
duration显示时间(毫秒)，设为 0 则不会自动关闭number3000
showClose是否显示关闭按钮booleanfalse
center文字是否居中booleanfalse
offsetMessage 距离窗口顶部的偏移量(px)number20

Message 方法 ​

调用 NMessage 会返回一个关闭消息的方法，可以手动调用该方法关闭消息。

ts
const close = NMessage('这是一条消息提示');
// 关闭消息
close();

样式变量 ​

变量名说明默认值
--nano-message-padding内边距12px 20px
--nano-message-min-width最小宽度300px
--nano-message-max-width最大宽度calc(100% - 32px)
--nano-message-font-size字体大小14px
--nano-message-line-height行高1.4
--nano-message-border-radius圆角var(--nano-border-radius-base)
--nano-message-icon-size图标大小16px
--nano-message-icon-margin图标外边距10px
--nano-message-close-size关闭按钮大小16px
--nano-message-close-margin关闭按钮外边距0 0 0 12px
--nano-message-shadow阴影0 2px 12px rgba(0, 0, 0, 0.1)