vue 父组件通知子组件_Vue 2的极简通知组件

vue 父组件通知子组件

vue-notifyjs (vue-notifyjs)

Minimalist notification component for Vue 2.x Why use it?

Vue 2.x的极简通知组件为何使用它？

• Small: 1.5kb (minified & gzipped), 4kb (minified)

  小：1.5kb(最小化并压缩)，4kb(最小化)

• Simple this.$notify({message:'My message'})

  简单这个。$ notify({message：'My message'})

• Has multiple themes

  有多个主题

• The animations can be customized through Vue transitions

  可以通过Vue过渡自定义动画

• Can be used both through npm and as a script tag

  既可以通过npm使用，也可以作为脚本标签使用

演示： (Demos:)

• jsFiddle demo

  jsFiddle演示

• Overlaping notifications

  重叠通知

• Custom html content via components

  通过组件自定义html内容

• Custom animations

  自定义动画

支持3个主题 (3 themes supported)

默认主题 (Default theme)

材料设计主题 (Material design theme)

Now-ui主题 (Now-ui theme)

安装 (Install)

yarn add vue-notifyjs

CDN JS： (CDN JS:)

* https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.min.js
* https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.js

CDN CSS： (CDN CSS:)

* https://unpkg.com/vue-notifyjs/themes/default.css
* https://unpkg.com/vue-notifyjs/themes/material.css
* https://unpkg.com/vue-notifyjs/themes/now-ui.css

用法 (Usage)

<template>
  <notifications></notifications>
</template>

<script>
import Notify from 'vue-notifyjs'
Vue.use(Notify)

export default {
   methods: {
    addNotification() {
      this.$notify({
        message: 'Welcome',
        type: 'success'
      })
    }
  }
}
</script>
<!-- import styles -->
<style src="vue-notifyjs/themes/default.css"></style>

Note: <notifications></notifications> can be declared only once anywhere in your app, preferably in your root component so the notification component is alive inside any other components.

注意： <notifications></notifications>只能在应用程序中的任何位置(最好是在根组件中)声明一次，因此通知组件在任何其他组件中均有效。

通知选项 (Notification options)

You can set notification options in 3 ways

您可以通过3种方式设置通知选项

1. Upon plugin initialization

   插件初始化后

import Notify from 'vue-notifyjs'
Vue.use(Notify, {type: 'primary', timeout: 2000})

1. Dynamically via setOptions method

   通过setOptions方法动态

this.$notifications.setOptions({
                            type: 'primary', 
                            timeout: 2000,
                            horizontalAlign: 'right',
                            verticalAlign: 'top'
                          })

1. When using $notify

   使用$notify

this.$notify({
        message: 'Welcome',
        type: 'success'
      })

Note: Options sent through this.$notify will override default options and will have higher priority than default options.

注意：通过this.$notify发送的选项将覆盖默认选项，并且具有比默认选项更高的优先级。

道具 (Props)

通知事项 (Notifications)

transitionName: {
 type:String,
 default:'list'
},
transitionMode: {
 type:String,
 default:'in-out'
},
overlap: {
 type: Boolean,
 default: false
}

通知(通过对象传递给$ notify方法) (Notification (passed through the object sent to $notify method))

props: {
    message: String,
    title: String,
    icon: String,
    verticalAlign: {
      type: String,
      default: 'top' // top | bottom
    },
    horizontalAlign: {
      type: String,
      default: 'center' // right | center | left
    },
    type: {
      type: String,
      default: 'info' // info | warning | danger | success
    },
    timeout: {
      type: Number,
      default: 5000
    },
    component: {  //is rendered instead of notification message
      type: [Object, Function]
    }
  },

翻译自: https://vuejsexamples.com/minimalist-notification-component-for-vue-2/

vue 父组件通知子组件