Sard Uniapp

Appearance

在新窗口打开⤴

Notify消息通知

介绍 ​

在页面顶部展示消息通知。

引入 ​

js
import Notify from 'sard-uniapp/components/notify/notify.vue'
import NotifyAgent from 'sard-uniapp/components/notify-agent/notify-agent.vue'
import { notify } from 'sard-uniapp'

代码演示 ​

基础使用 ​

先在页面放置代理组件。

tsx
<sar-notify-agent />

接着便可以使用 notify 等方法显示提示。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="ts">
import { notify } from 'sard-uniapp'

const showNotice = () => {
  notify('这是一条通知')
}
const hideNotice = () => {
  notify.hide()
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="js">
import { notify } from "sard-uniapp";
const showNotice = () => {
  notify("\u8FD9\u662F\u4E00\u6761\u901A\u77E5");
};
const hideNotice = () => {
  notify.hide();
};
</script>

类型 ​

支持 primary、success、warning、error 四种通知类型，默认为 primary

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="成功通知" @click="showSucessNotice" />
    <sar-list-item arrow hover title="警告通知" @click="showWarningNotice" />
    <sar-list-item arrow hover title="错误通知" @click="showErrorNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="ts">
import { notify } from 'sard-uniapp'

const showSucessNotice = () => {
  notify.success('这是一条通知')
}
const showWarningNotice = () => {
  notify.warning('这是一条通知')
}
const showErrorNotice = () => {
  notify.error('这是一条通知')
}
const hideNotice = () => notify.hide()
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="成功通知" @click="showSucessNotice" />
    <sar-list-item arrow hover title="警告通知" @click="showWarningNotice" />
    <sar-list-item arrow hover title="错误通知" @click="showErrorNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="js">
import { notify } from "sard-uniapp";
const showSucessNotice = () => {
  notify.success("\u8FD9\u662F\u4E00\u6761\u901A\u77E5");
};
const showWarningNotice = () => {
  notify.warning("\u8FD9\u662F\u4E00\u6761\u901A\u77E5");
};
const showErrorNotice = () => {
  notify.error("\u8FD9\u662F\u4E00\u6761\u901A\u77E5");
};
const hideNotice = () => notify.hide();
</script>

自定义颜色 ​

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="ts">
import { notify } from 'sard-uniapp'

const showNotice = () => {
  notify('这是一条通知', {
    background: 'var(--sar-orange)',
  })
}
const hideNotice = () => {
  notify.hide()
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="js">
import { notify } from "sard-uniapp";
const showNotice = () => {
  notify("\u8FD9\u662F\u4E00\u6761\u901A\u77E5", {
    background: "var(--sar-orange)"
  });
};
const hideNotice = () => {
  notify.hide();
};
</script>

自定义时长 ​

timeout 设为 0 后会一直显示。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示不会消失的通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="ts">
import { notify } from 'sard-uniapp'

const showNotice = () => {
  notify('这是一条通知', {
    timeout: 0,
  })
}
const hideNotice = () => {
  notify.hide()
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="显示不会消失的通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="js">
import { notify } from "sard-uniapp";
const showNotice = () => {
  notify("\u8FD9\u662F\u4E00\u6761\u901A\u77E5", {
    timeout: 0
  });
};
const hideNotice = () => {
  notify.hide();
};
</script>

自定义位置 ​

通知允许在屏幕上边或下边展示。

vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="在底部显示通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="ts">
import { notify } from 'sard-uniapp'

const showNotice = () => {
  notify('这是一条通知', {
    position: 'bottom',
  })
}
const hideNotice = () => {
  notify.hide()
}
</script>
vue
<template>
  <sar-list card>
    <sar-list-item arrow hover title="在底部显示通知" @click="showNotice" />
    <sar-list-item arrow hover title="隐藏通知" @click="hideNotice" />
  </sar-list>
</template>

<script setup lang="js">
import { notify } from "sard-uniapp";
const showNotice = () => {
  notify("\u8FD9\u662F\u4E00\u6761\u901A\u77E5", {
    position: "bottom"
  });
};
const hideNotice = () => {
  notify.hide();
};
</script>

API ​

NotifyProps ​

属性描述类型默认值
type加载类型'primary' | 'success' | 'warning' | 'error''primary'
message通知内容string-
color字体颜色string-
background背景色string-
visible (v-model)是否显示通知boolean-
position通知放置的位置'top' | 'bottom''top'
timeout展示时长(ms)，值为 0 时，通知不会消失number3000
duration显隐动画时长，单位 msnumber300
status-bar 1.12+是否包含状态栏，自定义导航栏时应设为 truebooleanfalse

NotifySlots 1.20.2+ ​

插槽描述属性
default自定义默认内容-

NotifyEmits ​

事件描述类型
update:visible通知框显隐时触发(visible: boolean) => void
click 1.20.2+点击通知框时触发(event: any) => void
visible-hook 1.20.2+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.20.2+入场动画开始前触发() => void
enter 1.20.2+入场动画开始时触发() => void
after-enter 1.20.2+入场动画结束时触发() => void
enter-cancelled 1.20.2+入场动画取消时触发() => void
before-leave 1.20.2+退场动画开始前触发() => void
leave 1.20.2+退场动画开始时触发() => void
after-leave 1.20.2+退场动画结束时触发() => void
leave-cancelled 1.20.2+退场动画取消时触发() => void

NotifyAgentProps / NotifyOptions ​

继承 NotifyProps 并有以下额外属性。

属性描述类型默认值
id通知组件的 idstring'notify'
onVisibleHook 1.20.2+入场/退场动画状态改变时调用(name: TransitionHookName) => void
onBeforeEnter 1.20.2+入场动画开始前调用() => void
onEnter 1.20.2+入场动画开始时调用() => void
onAfterEnter 1.20.2+入场动画结束时调用() => void
onEnterCancelled 1.20.2+入场动画取消时调用() => void
onBeforeLeave 1.20.2+退场动画开始前调用() => void
onLeave 1.20.2+退场动画开始时调用() => void
onAfterLeave 1.20.2+退场动画结束时调用() => void
onLeaveCancelled 1.20.2+退场动画取消时调用() => void

NotifyAgentEmits 1.20.2+ ​

继承 NotifyEmits。

命令式方法 ​

名称描述类型
notify显示通知NotifyFunction
notify.success显示成功类型通知NotifySimpleShowFunction
notify.warning显示警告类型通知NotifySimpleShowFunction
notify.error显示错误类型通知NotifySimpleShowFunction
notify.hide隐藏指定 id 的命令式通知(id = 'notify') => void
notify.hideAll隐藏所有命令式通知() => void

NotifyFunction ​

ts
type NotifyFunction = NotifySimpleShowFunction & {
  success: NotifySimpleShowFunction
  warning: NotifySimpleShowFunction
  error: NotifySimpleShowFunction
  hide: (id?: string) => void
  hideAll: () => void
}

NotifySimpleShowFunction ​

ts
interface NotifySimpleShowFunction {
  (options: NotifyOptions): void
  (message: string, options?: NotifyOptions): void
}

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-notify-paddding-x: 32rpx;
  --sar-notify-paddding-y: 16rpx;
  --sar-notify-font-size: var(--sar-text-base);
  --sar-notify-color: var(--sar-white);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao