vue-notification

开源

:icecream: Vue.js 用于显示通知的库

2.4K stars0 点赞0 次浏览

工具介绍

:icecream: Vue.js 用于显示通知的库

# Vue.js 通知

## 演示 - http://vue-notification.yev.io/ ## 设置 ```bash npm install --save vue-notification ``` 将依赖项添加到 `main.js`: ```javascript import Vue from 'vue' import Notifications from 'vue-notification'

/* or for SSR: import Notifications from 'vue-notification/dist/ssr.js' */

Vue.use(Notifications)

将全局组件添加到 `App.vue`:
```vue
<notifications/>

从.vue文件中触发通知:

javascript

// simple
this.$notify('Hello user!')

// using options
this.$notify({
  title: 'Important message',
  text: 'Hello user!'
});

或者从其他文件触发通知,例如您的路由器:

javascript

import Vue from 'vue'

Vue.notify({
  title: 'Authorization',
  text: 'You have been logged in!'
})

使用方法

Nuxt.js

nuxt.config.js

javascript

plugins: [
    { src: '~/plugins/notifications-ssr', ssr: true },
    { src: '~/plugins/notifications-client', ssr: false }
]

notifications-ssr.js

javascript

import Notifications from 'vue-notification/dist/ssr.js';
import Vue from 'vue';

Vue.use(Notifications);

notifications-client.js

javascript

import Notifications from 'vue-notification';
import Vue from 'vue';

Vue.use(Notifications);

组件属性

通知组件的大多数设置都是通过属性进行配置:

xml

<notifications position="bottom right" classes="my-custom-class"/>

请注意,所有属性都是可选的。

名称	类型	默认值	描述
position	字符串/数组	'top right'	通知将弹出的屏幕位置部分
width	数字/字符串	300	通知容器的宽度,可以是 `%`,`px` 字符串或数字。有效值: '100%', '200px', 200