NaEasy UI

Appearance

Notify 通知 ​

介绍 ​

在页面顶部展示消息提示，用于操作反馈、状态提示等场景。

导入 ​

js
import Notify, { type NotifyInstance } from '@/components/feedback/Notify.vue'

用法 ​

基础用法 ​

通过 ref 获取 Notify 实例，然后调用实例的 show 方法来显示通知。

vue
<template>
  <Notify ref="notify" />
  <CellGroup title="基础用法" round inset>
    <Cell title="显示通知" showArrow touchable @click="notify?.show({ content: '这是一个提示！' })" />
    <Cell title="成功提示" showArrow touchable @click="notify?.show({ content: '这是一个成功提示！', type: 'success' })" />
    <Cell title="失败提示" showArrow touchable @click="notify?.show({ content: '这是一个失败提示！', type: 'fail' })" />
    <Cell title="无网络提示" showArrow touchable @click="notify?.show({ content: '网络不给力，请稍后再试', type: 'offline' })" />
    <Cell title="自定义图标" showArrow touchable @click="notify?.show({ content: '自定义图标', icon: 'smile' })" />
  </CellGroup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Notify, { type NotifyInstance } from '@/components/feedback/Notify.vue';
import Cell from '@/components/basic/Cell.vue';
import CellGroup from '@/components/basic/CellGroup.vue';

const notify = ref<NotifyInstance>();
</script>

自定义配置 ​

可以自定义通知的时长、按钮、样式等。

vue
<template>
  <Notify ref="notify" />
  <CellGroup title="自定义配置" round inset>
    <Cell title="自定义时长" showArrow touchable @click="notify?.show({ content: '这是一个显示 8 秒的通知', duration: 8000 })" />
    <Cell title="自定义按钮" showArrow touchable @click="showWithButton" />
    <Cell title="自定义样式与颜色" showArrow touchable @click="showWithStyle" />
  </CellGroup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Notify, { type NotifyInstance } from '@/components/feedback/Notify.vue';
import Cell from '@/components/basic/Cell.vue';
import CellGroup from '@/components/basic/CellGroup.vue';

const notify = ref<NotifyInstance>();

function showWithButton() {
  notify.value?.show({
    content: '您有一条新消息!',
    button: '查看',
    onButtonClick() {
      uni.showModal({ content: '您点击了自定义按钮' });
    },
  });
}

function showWithStyle() {
  notify.value?.show({
    content: '这是一个自定义样式通知',
    notifyStyle: {
      backgroundColor: '#f61',
      borderRadius: '10rpx',
    },
    textStyle: {
      color: '#fff',
    },
  });
}
</script>

高级用法 ​

自定义渲染 ​

通过 slot 可以自定义通知的渲染内容。

vue
<template>
  <Notify ref="notify">
    <template #item="{ tag, item }">
      <template v-if="tag === 'ad1'">
        <Text color="#f00" :size="60">￥10</Text>
        <FlexCol>
          <Text>最高领10元红包🎁</Text>
          <Text>外卖爆款美食3.9元起</Text>
        </FlexCol>
        <Button type="danger" shape="round">立即领取</Button>
      </template>
    </template>
  </Notify>
  <Button @click="notify?.show({ tag: 'ad1', duration: 8000 })" type="primary">
    显示自定义通知
  </Button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Notify, { type NotifyInstance } from '@/components/feedback/Notify.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Button from '@/components/basic/Button.vue';

const notify = ref<NotifyInstance>();
</script>

动态修改内容 ​

vue
<template>
  <Notify ref="notify" />
  <Button @click="showAndUpdate" type="primary">
    显示并更新通知
  </Button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Notify, { type NotifyInstance } from '@/components/feedback/Notify.vue';
import Button from '@/components/basic/Button.vue';

const notify = ref<NotifyInstance>();

function showAndUpdate() {
  const item = notify.value?.show({
    content: '加载中请稍后',
    type: 'loading',
    duration: 0, // 不自动关闭
  });
  if (item) {
    let time = 0;
    const timer = setInterval(() => {
      if (time < 8) {
        time++;
        item.updateProps({ content: `加载中 （${time}/8）...` });
      } else {
        item.close(); // 手动关闭
        clearInterval(timer);
      }
    }, 1000);
  }
}
</script>

API 参考 ​

Notify ​

通知组件，用于在页面顶部展示消息提示。

Props ​

名称说明类型必填默认值
position提示显示位置'top' | 'bottom' | 'center'-'top'
closeOnClick点击后是否关闭通知boolean-false

Slots ​

名称说明
item自定义通知项渲染，可通过 tag 区分不同的通知
content自定义通知内容

实例方法 ​

方法名说明参数返回值
show显示通知NotifyShowPropsNotifyItemInstance
closeAll关闭所有通知--

NotifyShowProps ​

名称说明类型必填默认值
id用于自定义渲染的唯一标识number--
tag用于自定义渲染的标签string--
duration自动关闭的延时，单位ms。为0不会自动关闭number-4000
type图标类型'text' | 'loading' | 'success' | 'fail' | 'info' | 'offline'-'text'
icon自定义图标string--
content内容string--
button按钮文字string--
buttonProps按钮属性ButtonProp--
iconProps图标自定义属性IconProps--
closeOnClick是否在点击后关闭boolean-false
notifyStyle提示容器的自定义样式ViewStyle--
textStyle提示文字的自定义样式TextStyle--
onButtonClick按钮点击回调(e: any) => void--
onClose关闭后回调() => void--
onClick点击回调() => void--

NotifyItemInstance ​

方法名说明参数返回值
updateProps更新通知属性Omit<NotifyShowProps, 'duration'|'onClose'>-
close关闭通知--

主题变量 ​

名称类型默认值说明
NotifyBackgroundColorstringbackground.notify默认背景颜色
NotifySuccessBackgroundColorstringbackground.success成功状态背景颜色
NotifyFailBackgroundColorstringbackground.danger失败状态背景颜色
NotifyInfoBackgroundColorstringbackground.info信息状态背景颜色
NotifyOfflineBackgroundColorstringbackground.warning离线状态背景颜色
NotifyTextColorstringtext.content文本颜色
NotifyIconSuccessstringsuccess成功图标
NotifyIconErrorstringerror错误图标
NotifyIconOfflinestringcry离线图标
NotifyIconInfostringprompt信息图标
NotifyIconSizenumber45图标大小
NotifyIconMarginBottomnumber12图标底部间距
NotifyPaddingVerticalnumber25垂直内边距
NotifyPaddingHorizontalnumber30水平内边距
NotifyRadiusnumber16圆角大小
NotifyGapnumber21通知内部元素间距
NotifyContainerGapnumber15通知容器内间距
NotifyMarginWhenTopnumber100顶部位置时的上边距
NotifyMarginWhenBottomnumber100底部位置时的下边距