nano-ui

Notification 通知 ​

悬浮出现在页面角落的通知提醒，常用于较复杂的通知内容。

基础用法 ​

适用性广泛的通知栏。

<template>
  <n-button plain @click="open"> 打开通知 </n-button>
</template>

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

const open = () => {
  NNotify({
    title: '标题',
    message: '这是一条通知',
  });
};
</script>

不同类型 ​

用来显示「成功、警告、消息、错误」类的系统消息。

<template>
  <n-button plain @click="open1">成功</n-button>
  <n-button plain @click="open2">警告</n-button>
  <n-button plain @click="open3">消息</n-button>
  <n-button plain @click="open4">错误</n-button>
</template>

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

const open1 = () => {
  NNotify.success({
    title: '成功',
    message: '这是一条成功的提示消息',
  });
};

const open2 = () => {
  NNotify.warning({
    title: '警告',
    message: '这是一条警告的提示消息',
  });
};

const open3 = () => {
  NNotify.info({
    title: '消息',
    message: '这是一条消息的提示消息',
  });
};

const open4 = () => {
  NNotify.error({
    title: '错误',
    message: '这是一条错误的提示消息',
  });
};
</script>

自定义位置 ​

可以让 Notification 从屏幕四角中的任意一角弹出。

<template>
  <n-button plain @click="topRight">右上角</n-button>
  <n-button plain @click="topLeft">左上角</n-button>
  <n-button plain @click="bottomRight">右下角</n-button>
  <n-button plain @click="bottomLeft">左下角</n-button>
</template>

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

const topRight = () => {
  NNotify({
    title: '右上角',
    message: '这是一条通知',
    position: 'top-right',
  });
};

const topLeft = () => {
  NNotify({
    title: '左上角',
    message: '这是一条通知',
    position: 'top-left',
  });
};

const bottomRight = () => {
  NNotify({
    title: '右下角',
    message: '这是一条通知',
    position: 'bottom-right',
  });
};

const bottomLeft = () => {
  NNotify({
    title: '左下角',
    message: '这是一条通知',
    position: 'bottom-left',
  });
};
</script>

带有图标 ​

带有图标让信息更加醒目。

<template>
  <n-button plain @click="open"> 带图标的通知 </n-button>
</template>

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

const open = () => {
  NNotify({
    title: '带图标的标题',
    message: '这是一条带图标的通知',
    type: 'success',
    showIcon: true,
  });
};
</script>

隐藏关闭按钮 ​

可以不显示关闭按钮。

<template>
  <n-button plain @click="open"> 隐藏关闭按钮 </n-button>
</template>

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

const open = () => {
  NNotify({
    title: '无法关闭',
    message: '这是一条不能手动关闭的通知',
    showClose: false,
  });
};
</script>

使用方式 ​

全局方法 ​

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

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

// 使用方式
this.$notify({
  title: '标题',
  message: '这是一条通知',
});

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

单独引用 ​

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

// 基础用法
NNotify({
  title: '标题',
  message: '这是一条通知',
});

// 成功提示
NNotify.success({
  title: '成功',
  message: '这是一条成功的提示消息',
});

// 警告提示
NNotify.warning({
  title: '警告',
  message: '这是一条警告的提示消息',
});

// 错误提示
NNotify.error({
  title: '错误',
  message: '这是一条错误的提示消息',
});

API ​

Notification Options ​

名称说明类型默认值
title标题string-
message通知内容string | VNode-
type通知类型'success' | 'warning' | 'info' | 'error''info'
duration显示时间，单位为毫秒。设为 0 则不会自动关闭number4500
position自定义弹出位置'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'
showClose是否显示关闭按钮booleantrue
offset偏移距离，单位为 pxnumber16
onClick点击通知时的回调函数() => void-
onClose关闭通知时的回调函数() => void-

Notification 方法 ​

调用 NNotify 会返回一个用于关闭通知的方法：

ts
const close = NNotify({
  title: '标题',
  message: '这是一条通知',
});

// 关闭通知
close();

样式变量 ​

变量名说明默认值
--nano-notification-padding内边距14px 26px 14px 13px
--nano-notification-width宽度330px
--nano-notification-border-radius圆角var(--nano-border-radius-base)
--nano-notification-shadow阴影0 4px 12px rgba(0, 0, 0, 0.15)
--nano-notification-title-font-size标题字体大小16px
--nano-notification-content-font-size内容字体大小14px
--nano-notification-icon-size图标大小24px
--nano-notification-close-size关闭按钮大小16px
--nano-notification-close-hover-color关闭按钮悬浮色var(--nano-text-color-secondary)