mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-10-26 17:22:11 +08:00
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
});
$notify 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');
}
}
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 | 3000 |
| color | Message color | string | #fff |
| 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 | - |