z-base-ui

Appearance

Notification 通知提醒 ​

全局展示通知提醒信息。

代码演示 ​

普通提示

<template>
  <z-button type="primary" @click="createMsg">创建一条通知</z-button>
</template>

<script setup lang="ts">
import { Notification } from "@d7ee/z-base-ui";

const createMsg = () => {
  Notification.info({
    title: "提示",
    message: "This is a normal message"
  });
};
</script>

<style scoped>

</style>

修改延时 ​

自定义消息停留时长为 10s ，默认 3s。

<template>
  <z-button type="primary" @click="createMsg">创建一条通知10s后关闭</z-button>
</template>

<script setup lang="ts">
import { Notification } from "@d7ee/z-base-ui";

const createMsg = () => {
  Notification.info({
    title: "延时关闭",
    message: "This is a normal message"
  }, 10000);
};
</script>

<style scoped>

</style>

各类型通知 ​

成功 、信息、警告、失败。

<template>
  <z-button type="primary" @click="createMsg('info')">info message</z-button>
  <z-button type="success" @click="createMsg('success')">success message</z-button>
  <z-button type="danger" @click="createMsg('error')">error message</z-button>
  <z-button type="warning" @click="createMsg('warning')">warning message</z-button>
</template>

<script setup lang="ts">
import { Notification } from "@d7ee/z-base-ui";

const createMsg = (type: string) => {
  Notification[type]({
    title: type,
    message: `This is a ${type} message`
  });
};
</script>

<style scoped>

</style>

取消icon ​

<template>
  <z-button type="primary" @click="createMsg('info')">info message</z-button>
  <z-button type="success" @click="createMsg('success')">success message</z-button>
  <z-button type="danger" @click="createMsg('error')">error message</z-button>
  <z-button type="warning" @click="createMsg('warning')">warning message</z-button>
</template>

<script setup lang="ts">
import { Notification } from "@d7ee/z-base-ui";

const createMsg = (type: string) => {
  Notification({
    title: type,
    message: `This is a ${type} message`,
    type,
    showIcon: false
  });
};
</script>

<style scoped>

</style>

手动关闭 ​

<template>
  <z-button type="primary" @click="createMsg">创建一条可被关闭的通知</z-button>
</template>

<script setup lang="ts">
import { Notification } from "@d7ee/z-base-ui";

const createMsg = () => {
  Notification({
    title: "test title",
    message: "This is a message that can be closed",
    showClose: true
  });
};
</script>

<style scoped>

</style>

自定义内容 ​

<template>
  <z-button type="primary" @click="createMsg">创建一条自定义通知</z-button>
</template>

<script setup lang="ts">
import { Notification } from "@d7ee/z-base-ui";
import { h } from "vue";

const createMsg = () => {
  Notification({
    message: h("div", {
      style: {
        color: "red"
      }
    }, "This is a custom message"),
    showIcon: false
  });
};
</script>

<style scoped>

</style>

使用方法 ​

单独引入 Notification:

typescript
import { Notification } from "z-base-ui-plus";

/**
 * @param { Object | string } options 消息内容，当内容为string时隐藏title
 * @param { number } duration 停留时长，可选参数，默认3s，单位毫秒
 * @description 快速调用
 * */
Notification.success({title: "标题", message: "消息内容"});

// 完全体调用
Notification(options);

此时调用方法为 Notification(options)。 此处也为每个 type 定义了各自的方法，如 Notification.success("msg")。

notification 配置项 ​

属性名说明类型默认值
title标题string—
message 必填消息文字string | VNode—
duration停留时长，0 时永不关闭，单位毫秒number3000
showClose允许用户主动关闭消息booleanfalse
type消息类型success | info | warning | error—
showIcon显示预设图标booleantrue
offset每个通知之间的间距number20