Skip to content

notify

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

notify

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
test
test
 
 
Notify.tsx
Notify.tsx
 
 
README.md
README.md
 
 
README.zh-CN.md
README.zh-CN.md
 
 
index.less
index.less
 
 
index.ts
index.ts
 
 

README.md

Notify

Install

import Vue from 'vue';
import { Notify } from 'vant';

Vue.use(Notify);

Usage

Basic Usage

Notify('Notify Message');

Notify Type

Notify({ type: 'primary', message: 'Notify Message' });
Notify({ type: 'success', message: 'Notify Message' });
Notify({ type: 'danger', message: 'Notify Message' });
Notify({ type: 'warning', message: 'Notify Message' });

Custom Notify

Notify({
  message: 'Custom Color',
  color: '#ad0000',
  background: '#ffe1e1',
});

Notify({
  message: 'Custom Duration',
  duration: 1000,
});

Global Method

After import the Notify component, the $notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.

export default {
  mounted() {
    this.$notify('Notify Message');
  },
};

Component Call

<van-button type="primary" text="Component Call" @click="showNotify" />
<van-notify v-model="show" type="success">
  <van-icon name="bell" style="margin-right: 4px;" />
  <span>Content</span>
</van-notify>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showNotify() {
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, 2000);
    },
  },
};

API

Methods

Methods Attribute Return value Description
Notify `options message` notify instance
Notify.clear - void Close notify
Notify.setDefaultOptions options void Set default options of all notifies
Notify.resetDefaultOptions - void Reset default options of all notifies

Options

Attribute Description Type Default
type v2.1.6 Can be set to primary success warning string danger
message Message string -
duration Duration(ms), won't disappear if value is 0 number | string 3000
color Message color string white
background Background color string -
className Custom className any -
onClick Callback function after click Function -
onOpened Callback function after opened Function -
onClose Callback function after close Function -