插件名称 | kyvg |
---|---|
版本号 | v2.3.3 |
发布时间 | 2021年4月22日 |
插件作者 | vue3-notification |
vue3的简单通知库。
这是euvl创建的现在支持Vue 3的Vue 2 vue通知的分支。如果您使用的是Vue 2.x,请使用他的版本。
# Yarn
$ yarn add @kyvg/vue3-notification
# NPM
$ npm i @kyvg/vue3-notification
将依赖项添加到您的main.js
:
import { createApp } from 'vue'
import Notifications from '@kyvg/vue3-notification'
const app = createApp({...})
app.use(Notifications)
将全局组件添加到您的App.vue
:
<notifications />
触发.vue
文件通知:
// simple
this.$notify("Hello user!");
// using options
this.$notify({
title: "Important message",
text: "Hello user!",
});
或从其他文件(例如,路由器)触发通知:
import { notify } from "@kyvg/vue3-notification";
notify({
title: "Authorization",
text: "You have been logged in!",
});
Vue.notify({
title: "Vue 2 notification",
});
import { notify } from "@kyvg/vue3-notification";
notify({
title: "Vue 3 notification ?",
});
通知组件的大多数设置是使用props配置的:
<notifications position="bottom right" classes="my-custom-class" />
请注意,所有道具都是可选的。
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
position | String/Array | ‘右上’ | 屏幕上会弹出通知的部分 |
width | Number/String | 300 | 通知持有人的宽度,可以是% ,px 字符串或数字。有效值:“ 100%”,“ 200px”,200 |
classes | String/Array | ‘vue-notification’ | 将应用于通知元素的类的列表 |
group | String | null | 通知持有人的姓名(如果指定) |
duration | Number | 3000 | 将通知保留在屏幕上的时间(以毫秒为单位)(如果否定-通知将永久保留或直到被单击) |
speed | Number | 300 | 显示/隐藏通知的时间(以毫秒为单位) |
animation-type | String | ‘css’ | 动画类型,当前支持的类型是css 和velocity |
animation-name | String | null | 动画所需的css 动画名称 |
animation | Object | Custom | Velocity动画的动画配置 |
max | Number | Infinity | 通知持有人中可以显示的最大通知数 |
reverse | Boolean | false | 以相反的顺序显示通知 |
ignoreDuplicates | Boolean | false | 忽略同一通知的重复实例 |
closeOnClick | Boolean | true | 单击时关闭通知 |
06/16/2021
06/07/2021
05/30/2021
2021年5月5日