Pixel UI

Notification 通知 ​

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

基础用法 ​

Pixel UI 注册了 $notify 方法并且它接受一个 Object 作为其参数。在最简单的情况下, 你可以通过设置 title 和 message 属性来设置通知的标题和正文内容。默认情况下, 通知在 3000 毫秒后自动关闭, 但你可以通过设置 duration 属性来自定义通知的展示时间。如果你将它设置为 0, 那么通知将不会自动关闭。需要注意的是 duration 接收一个 Number, 单位为毫秒。

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

<script lang="ts" setup>
import { h } from 'vue'
import { PxNotification } from '@mmt817/pixel-ui'

const open1 = () => {
  PxNotification({
    title: 'Title',
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode')
    ]),
    position: 'bottom-right'
  })
}

const open2 = () => {
  PxNotification({
    title: 'Prompt',
    message: 'This is a message that does not automatically close',
    position: 'top-left',
    duration: 0
  })
}
</script>

不同状态 ​

用来显示「成功、警告、消息、错误」等类的操作反馈。

当需要自定义更多属性时, Notification 也可以接收一个对象为参数。比如, 设置 type 字段可以定义不同的状态, 默认为 info。此时正文内容以 message 的值传入。同时, 我们也为 Notification 的各种 type 注册了方法, 可以在不传入 type 字段的情况下像 open4 那样直接调用。形式同 Message 组件。

TIP

type="stamp" 默认白色背景, 建议搭配深色底色使用。

<template>
  <div class="f-c flex-wrap gap-10">
    <px-button @click="open5" :use-throttle="false" type="primary">
      Primary
    </px-button>
    <px-button @click="open2" :use-throttle="false" type="success">
      Success
    </px-button>
    <px-button @click="open3" :use-throttle="false" type="warning">
      Warning
    </px-button>
    <px-button @click="open1" :use-throttle="false" type="base">Info</px-button>
    <px-button @click="open4" :use-throttle="false" type="danger">
      Danger
    </px-button>
    <px-button @click="open6" :use-throttle="false" type="sakura">
      Sakura
    </px-button>
    <px-button @click="open7" :use-throttle="false" class="iron-btn">
      Iron
    </px-button>
    <px-button @click="open8" :use-throttle="false" class="stamp-btn">
      Stamp
    </px-button>
  </div>
</template>

<script lang="ts" setup>
import { PxNotification } from '@mmt817/pixel-ui'

const open1 = () => {
  PxNotification({
    title: 'Info',
    message: 'This is a info message.'
  })
}
const open2 = () => {
  PxNotification({
    title: 'Success',
    message: 'Congrats, this is a success message.',
    type: 'success'
  })
}
const open3 = () => {
  PxNotification({
    title: 'Warning',
    message: 'Warning, this is a warning message.',
    type: 'warning'
  })
}
const open4 = () => {
  PxNotification.error({
    title: 'Danger',
    message: 'Oops, this is a error message.'
  })
}
const open5 = () => {
  PxNotification.primary({
    title: 'Primary',
    message: 'This is a primary message.'
  })
}
const open6 = () => {
  PxNotification.sakura({
    title: 'Sakura',
    message: 'This is a sakura message.'
  })
}
const open7 = () => {
  PxNotification.iron({
    title: 'Iron',
    message: 'This is a iron message.'
  })
}
const open8 = () => {
  PxNotification.stamp({
    title: 'Stamp',
    message: 'This is a stamp message.'
  })
}
</script>
<style scoped>
.iron-btn {
  --px-button-text-color: #8f9db5;
  --px-border-color: #b4c0d2;
  --px-bg-color: #3a4567;
  --px-bg-shadow-color: #252d46;

  &:hover {
    --px-bg-color: #3a4567;
  }
}
.stamp-btn {
  --px-bg-color: #ebe6e0;
  --px-bg-shadow-color: #00000033;

  &:hover {
    --px-bg-color: #ebe6e0;
  }
}
</style>

自定义弹出位置 ​

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

使用 position 属性设置 Notification 的弹出位置, 支持四个选项: top-right、top-left、bottom-right 和 bottom-left, 默认为 top-right。

<template>
  <px-button @click="open1" type="primary">Top Right</px-button>
  <px-button @click="open2" type="success">Bottom Right</px-button>
  <px-button @click="open3" type="warning">Bottom Left</px-button>
  <px-button @click="open4" type="danger">Top Left</px-button>
</template>

<script lang="ts" setup>
import { PxNotification } from '@mmt817/pixel-ui'

const open1 = () => {
  PxNotification.primary({
    title: 'Custom Position',
    message: "I'm at the top right corner"
  })
}

const open2 = () => {
  PxNotification.success({
    title: 'Custom Position',
    message: "I'm at the bottom right corner",
    position: 'bottom-right'
  })
}

const open3 = () => {
  PxNotification.warning({
    title: 'Custom Position',
    message: "I'm at the bottom left corner",
    position: 'bottom-left'
  })
}

const open4 = () => {
  PxNotification.danger({
    title: 'Custom Position',
    message: "I'm at the top left corner",
    position: 'top-left'
  })
}
</script>

自定义偏移量 ​

Notification 提供设置偏移量的功能, 通过设置 offset 字段, 可以使弹出的消息距屏幕边缘偏移一段距离。 注意在同一时刻, 每一个的 Notification 实例应当具有一个相同的偏移量。

<template>
  <px-button @click="open" type="success">offset</px-button>
</template>

<script lang="ts" setup>
import { PxNotification } from '@mmt817/pixel-ui'

const open = () => {
  PxNotification.success({
    title: 'Success',
    message: 'This is a success message',
    offset: 300
  })
}
</script>

隐藏关闭按钮 ​

可以通过设置 closable 属性来隐藏关闭按钮。

<template>
  <px-button @click="open" type="primary"> Hide close button </px-button>
</template>

<script lang="ts" setup>
import { PxNotification } from '@mmt817/pixel-ui'

const open = () => {
  PxNotification.primary({
    title: 'primary',
    message: 'This is a message without close button',
    showClose: false
  })
}
</script>

全局方法​ ​

Pixel UI 为 app.config.globalProperties 添加了全局方法 $notify。因此在 Vue 实例中可以作为 this.$notify 使用。

<template>
  <div>
    <px-button @click="open1">插件式调用</px-button>
    <px-button @click="open2">函数式调用</px-button>
    <px-button
      @click="
        $notify.warning({
          title: 'Warning',
          message: '全局方法调用 Notification'
        })
      "
    >
      全局方法调用
    </px-button>
  </div>
</template>
<script lang="ts" setup>
import { PxNotification } from '@mmt817/pixel-ui'

const open1 = () => {
  PxNotification({
    title: 'Primary',
    message: '插件式调用 NoPxNotification',
    type: 'primary'
  })
}
const open2 = () => {
  PxNotification.success({
    title: 'Success',
    message: '函数式调用 NoPxNotification'
  })
}
</script>

单独引用 ​

ts
import { PxNotification } from '@mmt817/pixel-ui'

此时调用方法为 PxNotification(options)。

我们也为每个 type 定义了各自的方法 如 PxNotification.success(options)。

并且可以调用 PxNotification.closeAll() 手动关闭所有实例。

API_Table插件测试 ​

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Notification API

Props

NameDescriptionTypeDefault
title通知标题string-
message通知内容string | VNode-
type通知类型enuminfo
icon自定义图标string-
duration显示时间(ms), 设为0则不会自动关闭number3000
showClose是否显示关闭按钮booleantrue
offset距离窗口顶部的位置偏移量number20
transitionName过渡动画名称stringfade
position通知位置enumtop-right
onClose关闭回调function-
onClick点击回调function-

Expose

NameDescriptionType
close关闭消息function
bottomOffset消息底部距离视口顶偏移量Ref<number>
本站访客数 人次 本站总访问量 次