Notify 消息提示

介绍

在页面顶部展示消息提示,支持函数调用和组件调用两种方式。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-notify": "@vant/weapp/notify/index"
  3. }

代码演示

基础用法

  1. import Notify from '@vant/weapp/notify/notify';
  2. Notify('通知内容');
  1. <!-- 在页面内添加对应的节点 -->
  2. <van-notify id="van-notify" />

通知类型

支持primarysuccesswarningdanger四种通知类型,默认为danger

  1. // 主要通知
  2. Notify({ type: 'primary', message: '通知内容' });
  3. // 成功通知
  4. Notify({ type: 'success', message: '通知内容' });
  5. // 危险通知
  6. Notify({ type: 'danger', message: '通知内容' });
  7. // 警告通知
  8. Notify({ type: 'warning', message: '通知内容' });

自定义通知

自定义消息通知的颜色和展示时长。

  1. Notify({
  2. message: '自定义颜色',
  3. color: '#ad0000',
  4. background: '#ffe1e1',
  5. });
  6. Notify({
  7. message: '自定义时长',
  8. duration: 1000,
  9. });

自定义选择器

  1. Notify({
  2. message: '自定义节点选择器',
  3. duration: 1000,
  4. selector: '#custom-selector',
  5. });
  1. <!-- 在页面内添加自定义节点 -->
  2. <van-notify id="custom-selector" />

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型,可选值为 primary success warningstringdanger
message v1.0.0展示文案,支持通过\n换行string‘’
duration展示时长(ms),值为 0 时,notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围,可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离(状态栏高度)booleanfalse

Notify 消息通知 - 图1