Notify 消息提示

引入

  1. import { Notify } from 'vant';
  2. Vue.use(Notify);

代码演示

基础用法

  1. Notify('通知内容');

自定义配置

  1. Notify({
  2. message: '通知内容',
  3. duration: 1000,
  4. background: '#1989fa'
  5. });

组件内调用

引入 Notify 组件后,会自动在 Vue 的 prototype 上挂载 $notify 方法,便于在组件内调用。

  1. export default {
  2. mounted() {
  3. this.$notify('提示文案');
  4. }
  5. }

API

方法

方法名参数返回值介绍
Notifyoptions | messagenotify 实例展示提示
Notify.clear-void关闭提示
Notify.setDefaultOptionsoptionsvoid修改默认配置,对所有 Notify 生效
Notify.resetDefaultOptions-void重置默认配置,对所有 Notify 生效

Options

参数说明类型默认值版本
message展示文案,支持通过\n换行String-1.4.7
duration展示时长(ms),值为 0 时,notify 不会消失Number30001.4.7
color字体颜色String#fff1.4.7
background背景颜色String#f441.4.7
className自定义类名String | Array | Object-1.6.0
onClick点击时的回调函数Function-2.0.0
onOpened完全展示后的回调函数Function-2.0.0
onClose关闭时的回调函数Function-2.0.0

Notify 消息通知 - 图1