Pixel UI

Message 消息提示 ​

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

基础用法 ​

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

Message 在配置上与 Notification 非常类似, 所以部分 options 在此不做详尽解释。文末有 options 列表, 可以结合 Notification 的文档理解它们。Pixel UI 注册了一个全局的 $message 方法用于调用。Message 可以接收一个字符串或一个 VNode 作为参数, 它会被显示为正文内容。

<template>
  <px-button @click="open" :use-throttle="false">Show message</px-button>
  <px-button @click="openVn" :use-throttle="false">VNode</px-button>
</template>

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

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

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

不同状态 ​

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

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

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 { PxMessage } from '@mmt817/pixel-ui'

const open1 = () => {
  PxMessage('This is a info message.')
}
const open2 = () => {
  PxMessage({
    message: 'Congrats, this is a success message.',
    type: 'success'
  })
}
const open3 = () => {
  PxMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning'
  })
}
const open4 = () => {
  PxMessage.error('Oops, this is a danger message.')
}
const open5 = () => {
  PxMessage.primary('This is a primary message.')
}
const open6 = () => {
  PxMessage.sakura('This is a sakura message.')
}
const open7 = () => {
  PxMessage.iron('This is a iron message.')
}
const open8 = () => {
  PxMessage.stamp('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>

可关闭的消息提示 ​

可以添加关闭按钮。

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

<template>
  <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
  >
  <div class="f-c mt-20">
    <px-button @click="handleClose">closeAll</px-button>
  </div>
</template>

<script lang="ts" setup>
import { PxMessage } from '@mmt817/pixel-ui'
const handleClose = () => {
  PxMessage.closeAll()
}
const open1 = () => {
  PxMessage({
    message: 'This is a info message.',
    showClose: true
  })
}
const open2 = () => {
  PxMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
    showClose: true
  })
}
const open3 = () => {
  PxMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
    showClose: true
  })
}
const open4 = () => {
  PxMessage.error({
    message: 'Oops, this is a error message.',
    showClose: true
  })
}
const open5 = () => {
  PxMessage.primary({
    message: 'This is a primary message.',
    showClose: true,
    duration: 0
  })
}

const open6 = () => {
  PxMessage.sakura({
    message: 'This is a sakura message.',
    showClose: true,
    duration: 0
  })
}
</script>

文字居中 ​

可以通过设置 center 属性来使 Message 文本内容居中。

<template>
  <px-button @click="openCenter">Centered text</px-button>
</template>
<script lang="ts" setup>
import { PxMessage } from '@mmt817/pixel-ui'

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

自定义图标 ​

可以通过设置 icon 属性来自定义图标。该属性会覆盖 type 的默认图标。

<template>
  <px-button @click="open" type="sakura">Icon</px-button>
</template>
<script lang="ts" setup>
import { PxMessage } from '@mmt817/pixel-ui'

const open = () => {
  PxMessage.sakura({
    showClose: true,
    message: 'Custom icon',
    icon: 'bluesky'
  })
}
</script>

全局方法​ ​

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

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

const open1 = () => {
  PxMessage({
    message: '插件式调用 Message',
    type: 'primary'
  })
}
const open2 = () => {
  PxMessage.success('函数式调用 Message')
}
</script>

单独引用 ​

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

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

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

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

API_Table插件测试 ​

DANGER

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

Message API

Props

NameDescriptionTypeDefault
message消息文字string | VNode | (() => VNode)''
type消息类型enuminfo
icon自定义图标string-
duration显示时间(ms), 设为0则不会自动关闭number3000
showClose是否显示关闭按钮booleanfalse
center是否居中显示booleanfalse
offset距离窗口顶部的位置偏移量number10
transitionName过渡动画名称stringfade-up

Expose

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