vue⽗组件通知⼦组件_Vue2的极简通知组件vue ⽗组件通知⼦组件
vue-notifyjs (vue-notifyjs)
Minimalist notification component for Vue 2.x Why u 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过渡⾃定义动画password什么意思
Can be ud both through npm and as a script tag
既可以通过npm使⽤，也可以作为脚本标签使⽤
演⽰： (Demos:)
⽀持3个主题 (3 themes supported)
()
()
()
安装 (Install)
yarn add vue-notifyjs
CDN JS： (CDN JS:)
* /vue-notifyjs/dist/vue-notifyjs.min.js
* /vue-notifyjs/dist/vue-notifyjs.js
CDN CSS： (CDN CSS:)
* /vue-notifyjs/themes/default.css
* /vue-notifyjs/themes/material.css
* /vue-notifyjs/themes/now-ui.css
⽤法 (Usage)
<template>
<notifications></notifications>
deep down</template>
<script>
import Notify from 'vue-notifyjs'
英语一分钟演讲稿Vue.u(Notify)
export default {
methods: {
addNotification() {
this.$notify({
message: 'Welcome',
type: 'success'
})
uim
}
}
}
</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.em的用法
注意： <notifications></notifications>只能在应⽤程序中的任何位置(最好是在根组件中)声明⼀次，因此通知组件在任何其他组件中均有效。
通知选项 (Notification options)
You can t notification options in 3 ways
您可以通过3种⽅式设置通知选项
1. Upon plugin initialization
插件初始化后
import Notify from 'vue-notifyjs'
Vue.u(Notify, {type: 'primary', timeout: 2000})
1. Dynamically via tOptions method
通过tOptions⽅法动态
this.$notifications.tOptions({
type: 'primary',
timeout: 2000,
horizontalAlign: 'right',
verticalAlign: 'top'
})
1. When using $notify
quences使⽤$notify
女户this.$notify({
message: 'Welcome',
type: 'success'
})
Note: Options nt 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: {oms
type:String,
default:'in-out'
},
overlap: {
type: Boolean,
default: fal
}
通知(通过对象传递给$ notify⽅法) (Notification (pasd through the object nt 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]
}
},
vue ⽗组件通知⼦组件
