Vue 3 通知库.zip

[](https://www.npmjs.com/package/@kyvg/vue3-notification)  ## Upgrade to v3.x ### Breaking changes - `title` and `text` no longer render with [`v-html`](https://vuejs.org/api/built-in-directives.html#v-html). Use `dangerouslySetInnerHtml` prop to render `title` and `text` with [`v-html`](https://vuejs.org/api/built-in-directives.html#v-html) # Vue.js notifications This is a fork and port of Vue 2 [vue-notifications](https://github.com/euvl/vue-notification) created by [euvl](https://github.com/euvl) to now support Vue 3. If you're using Vue 2.x use his version. <p align="center"> <img src="https://media.giphy.com/media/xUn3C6FmbGmszMem64/giphy.gif"> </p> ## Setup ```bash npm install --save @kyvg/vue3-notification yarn add @kyvg/vue3-notification ``` Add dependencies to your `main.js`: ```javascript import { createApp } from 'vue' import Notifications from '@kyvg/vue3-notification' const app = createApp({...}) app.use(Notifications) ``` Add the global component to your `App.vue`: ```vue <notifications /> ``` Please note that this library does not inherently support Nuxt 3. To enable compatibility with Nuxt 3, use the [`nuxt3-notifications`](https://github.com/windx-foobar/nuxt3-notifications) wrapper ## Usage Trigger notifications from your `.vue` files: ```javascript // simple this.$notify("Hello user!"); // using options this.$notify({ title: "Important message", text: "Hello user!", }); ``` Or trigger notifications from other files, for example, your router: ```javascript import { notify } from "@kyvg/vue3-notification"; notify({ title: "Authorization", text: "You have been logged in!", }); ``` Or use Composition API style: ```javascript import { useNotification } from "@kyvg/vue3-notification"; const { notify } = useNotification() notify({ title: "Authorization", text: "You have been logged in!", }); ``` ### Migration #### Vue 2.x syntax ```javascript Vue.notify({ title: "Vue 2 notification", }); ``` #### Vue 3.x syntax ```javascript import { notify } from "@kyvg/vue3-notification"; notify({ title: "Vue 3 notification 🎉", }); ``` #### Vue 3.x Composition API syntax ```javascript import { useNotification } from "@kyvg/vue3-notification"; const notification = useNotification() notification.notify({ title: "Vue 3 notification 🎉", }); ``` Also you can use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) ```javascript import { useNotification } from "@kyvg/vue3-notification"; const { notify } = useNotification() notify({ title: "Vue 3 notification 🎉", }); ``` ### Component props The majority of settings for the Notifications component are configured using props: ```vue <notifications position="bottom right" classes="my-custom-class" /> ``` Note that all props are optional. | Name | Type | Default | Description | | ---------------- | ------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | | position | String/Array | 'top right' | Part of the screen where notifications will pop out | | width | Number/String | 300 | Width of notification holder, can be `%`, `px` string or number.<br>Valid values: '100%', '200px', 200 | | classes | String/Array | 'vue-notification' | List of classes that will be applied to notification element | | group | String | null | Name of the notification holder, if specified | | duration | Number | 3000 | Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) | | speed | Number | 300 | Time (in ms) to show / hide notifications | | animation-type | String | 'css' | Type of animation, currently supported types are `css` and `velocity` | | animation-name | String | null | Animation name required for `css` animation | | animation | Object | Custom | Animation configuration for [Velocity](#Animation]) animation | | max | Number | Infinity | Maximum number of notifications that can be shown in notification holder | | reverse | Boolean | false | Show notifications in reverse order | | ignoreDuplicates | Boolean | false | Ignore repeated instances of the same notification | | closeOnClick | Boolean | true | Close notification when clicked | | pauseOnHover | Boolean | false | Keep the notification open while mouse hovers on notification | | dangerouslySetInnerHtml | Boolean | false | Use [v-html](https://vuejs.org/api/built-in-directives.html#v-html) to set `title` and `text` | ### Component events | Name | Type | Description | | ---------------- | -------------------------------- | -------------------------------------------- | | click | (item: NotificationItem) => void | The callback function that is triggered when notification was clicked | destroy | (item: NotificationItem) => void | The callback function that is triggered when notification was destroyes | start | (item: NotificationItem) => void | The callback function that is triggered when notification was appeared ### API Notifications are triggered via the API: ```javascript this.$notify({ // (optional) // Name of the notification holder group: 'foo', // (optional) // Title (will be wrapped in div.notification-title) title: 'This is the <em>title</em>', // Content (will be wrapped in div.notification-content) text: 'This is some <b>content</b>', // (optional) // Class that will be assigned to the notification type: 'warn', // (optional, override) // Time (in ms) to keep the notification on screen duration: 10000, // (optional, override) // Time (in ms) to show / hide notifications speed: 1000 // (optional) // Data object that can be used in your template data: {} }) ``` To remove notifications, include the `clean: true` parameter. ```javascript this.$notify({ group: "foo", // clean only the foo group clean: true, }); ``` ### Plugin Options Configure the plugin itself using an additional options object: ```js app.use(Notifications, { name: "alert" }); ``` All options are optional: | Name | Type | Default | Description | | ------------- | ---