• Notify 消息提示
    • 引入
  • 代码演示
    • 基础用法
    • 自定义配置
    • 组件内调用
  • API
    • 方法
    • Options

    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