vue3 简单通知组件 - vue3-notification

vue3 简单通知组件 -  vue3-notification
插件名称 kyvg
版本号 v2.3.0
发布时间 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 2.x语法

Vue.notify({
  title: "Vue 2 notification",
});

Vue 3.x语法

import { notify } from "@kyvg/vue3-notification";

notify({
  title: "Vue 3 notification 🎉",
});

组件道具

通知组件的大多数设置是使用props配置的:

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

请注意,所有道具都是可选的。

名称类型默认描述
positionString/Array‘右上’屏幕上会弹出通知的部分
widthNumber/String300通知持有人的宽度,可以是%px字符串或数字。
有效值:“ 100%”,“ 200px”,200
classesString/Array‘vue-notification’将应用于通知元素的类的列表
groupStringnull通知持有人的姓名(如果指定)
durationNumber3000将通知保留在屏幕上的时间(以毫秒为单位)(如果否定-通知将永久保留或直到被单击)
speedNumber300显示/隐藏通知的时间(以毫秒为单位)
animation-typeString‘css’动画类型,当前支持的类型是cssvelocity
animation-nameStringnull动画所需的css动画名称
animationObjectCustomVelocity动画的动画配置
maxNumberInfinity通知持有人中可以显示的最大通知数
reverseBooleanfalse以相反的顺序显示通知
ignoreDuplicatesBooleanfalse忽略同一通知的重复实例
closeOnClickBooleantrue单击时关闭通知

变更日志:

2021年5月5日

  • v2.3.0