Awesome Notifications库的Vue.js版本

Vue很棒的通知 (Vue Awesome Notifications)

It's a Vue.js version of Awesome Notifications library. Awesome Notifications is a lightweight JavaScript library for notifications.

这是Awesome Notifications库的Vue.js版本。 Awesome Notifications是一个用于通知的轻量级JavaScript库。

View demo 查看演示 Download Source 下载源

安装 (Install)

Attention! This library uses FontAwesome icons, so you either need to make sure that FontAwesome is connected to your project, either disable icons, passing the icons: {enabled: false} property to options. Also you can preserve icons, setting up a custom template for them via editting options.icons.template

注意！ 该库使用FontAwesome图标，因此您要么需要确保FontAwesome已连接到您的项目，要么禁用图标，然后将icons: {enabled: false}属性传递给选项。 您还可以保留图标，并通过编辑options.icons.template为它们设置自定义模板options.icons.template

npm install --save vue-awesome-notifications

In main.js

在main.js中

import Vue from "vue"
import VueAWN from "vue-awesome-notifications"

Vue.use(VueAWN, options)

In any of your files:

在您的任何文件中：

this.$awn.success("Your custom message")

默认样式的用法 (Usage of default styles)

For easier customization, SCSS version is preffered.

为便于自定义，建议使用SCSS版本。

With SCSS - In your App.vue

使用SCSS-在您的App.vue中

<style lang="scss">
@import '~vue-awesome-notifications/dist/styles/style.scss';
</style>

With CSS - In your App.vue

使用CSS-在您的App.vue中

<style lang="css">
@import 'vue-awesome-notifications/dist/styles/style.css';
</style>

Or in main.js

或在main.js中

require("vue-awesome-notifications/dist/styles/style.css")

**

**

翻译自: https://vuejsexamples.com/a-vue-js-version-of-awesome-notifications-library/