@tanzhenxing/zx-notify v1.0.2

zx-notify 顶部通知组件

zx-notify 是一个适用于 H5、小程序、App 的顶部通知提示组件，基于 uniapp + vue3 setup 实现，支持多端，无浏览器特有 DOM。

组件特性

• 支持多端（H5、微信/支付宝/百度/字节小程序、App）
• 支持多种主题（primary、success、warning、error）
• 支持自定义颜色、背景、字体大小
• 支持顶部安全区适配
• 支持自动/手动关闭
• 支持插槽自定义图标

基本用法

<template>
  <zx-notify ref="notifyRef" />
  <button @click="showNotify">显示通知</button>
</template>

<script setup>
import { ref } from 'vue'
import ZxNotify from '@/components/zx-notify/zx-notify.vue'

const notifyRef = ref()
const showNotify = () => {
  notifyRef.value?.show({
    type: 'success',
    message: '操作成功',
    duration: 2000
  })
}
</script>

属性 Props

方法 Methods

• show(options) 显示通知，options同上属性
• close() 手动关闭通知

事件 Events

插槽 Slots

示例

详见 src/pages/components/notify/index.vue

注意事项

• 组件需通过 ref 调用 show 方法进行展示
• 支持多端，无浏览器特有 DOM