V3 Element

Appearance

On this page

Notification 通知 ​

悬浮出现在页面角落，显示全局的通知提醒消息。

基础用法 ​

注册了一个 createNotification 方法用于调用。 你可以通过设置 title 和 message 属性来设置通知的标题和正文内容。默认情况下，通知在 3000 毫秒后自动关闭，但你可以通过设置 duration 属性来自定义通知的展示时间。 如果你将它设置为 0，那么通知将不会自动关闭。 需要注意的是 duration 接收一个 Number，单位为毫秒。

<template>
  <vk-button plain @click="open1">Closes automatically</vk-button>
  <vk-button plain @click="open2">Won't close automatically</vk-button>
</template>

<script setup>
import { h } from 'vue';
import { createNotification } from '@/components/Notification';

const open1 = () => {
  createNotification({
    title: 'Title',
    message: h('i', { style: 'color: teal' }, 'This is a reminder')
  });
};

const open2 = () => {
  createNotification({
    title: 'Prompt',
    message: 'This is a message that does not automatically close',
    duration: 0
  });
};
</script>

不同类型的通知 ​

我们提供了四种不同类型的提醒框：success、warning、info 和 danger。

<template>
  <vk-button plain @click="open1">Success</vk-button>
  <vk-button plain @click="open2">Warning</vk-button>
  <vk-button plain @click="open3">Info</vk-button>
  <vk-button plain @click="open4">Error</vk-button>
</template>

<script lang="ts" setup>
import { createNotification } from '@/components/Notification';

const open1 = () => {
  createNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success'
  });
};

const open2 = () => {
  createNotification({
    title: 'Warning',
    message: 'This is a warning message',
    type: 'warning'
  });
};

const open3 = () => {
  createNotification({
    title: 'Info',
    message: 'This is an info message',
    type: 'info'
  });
};

const open4 = () => {
  createNotification({
    title: 'Error',
    message: 'This is an error message',
    type: 'danger'
  });
};
</script>

隐藏关闭按钮 ​

通知的关闭按钮可以被设置为隐藏。

将 showClose 属性设置为 false 即可隐藏关闭按钮。

<template>
  <vk-button plain @click="open">Hide close button</vk-button>
</template>

<script lang="ts" setup>
import { createNotification } from '@/components/Notification';

const open = () => {
  createNotification({
    title: 'Info',
    message: 'This is a message without close button',
    showClose: false,
    duration: 0
  });
};
</script>

自定义图标类型 ​

可以使用 icon 属性来自定义通知左侧图标。图标名称请看 fontawesome 官网 https://fontawesome.com/search?o=r&m=free&s=solid

<template>
  <vk-button type="primary" @click="open">创建一条带图标的通知</vk-button>
</template>

<script setup>
import { createNotification } from '@/components/Notification';

const open = () => {
  createNotification({
    title: 'this is the title',
    message: 'hello world',
    icon: 'star'
  });
};
</script>

单独引用 ​

ts
import { createNotification } from 'v3-element';

API ​

Notification 配置项 ​

使用 createNotification 创建通知，它接受一个 Object，以下是 Object 中的属性列表。

名称说明类型默认值
title标题string-
message通知栏正文内容string | VNode-
type通知的类型success | info | warning | dangerinfo
duration显示时间，单位为毫秒。 设为 0 则不会自动关闭number3000
showClose是否显示关闭按钮booleantrue
offset距离上一个 Notification 之间的间隔number20
icon左侧自定义图标名称string-

Notification 方法 ​

调用 createNotification 会返回当前 Notification 的实例。 如果需要手动关闭实例，可以调用它的 close 方法。

名称描述类型
close关闭当前的 Notification() => void