Simple notify handler componen
Versión en español
Simple notify handler component for Vue.js.
GitHub
CodePen
Quick Start NPMInstall the package:
npm install vue-simple-notify
Register the component:
import Vue from 'vue' import VueSimpleNotify from 'VueSimpleNotify' Vue.component('VueSimpleNotify', VueSimpleNotify)
Use the component:
<vue-simple-notify :items="[]"></vue-simple-notify> CDN
Include styles:
<link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css">
Include scripts:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script>
Register the component:
Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)
Use the component:
<vue-simple-notify :items="[]"></vue-simple-notify> Examples
Examples of use for this component:
- Using CDN<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <vue-simple-notify :items="[]"></vue-simple-notify> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script> <script> Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify) new Vue().$mount('#app') </script> </body> </html> - Adding items
<vue-simple-notify :items="items" ></vue-simple-notify>
new Vue({ el: '#app', components: { VueSimpleNotify }, data () { return { items: [ { message: 'example of error message.' }, { type: 'Success', color: '#2ecc71', dismissable: false, message: 'example of success message.' } ] } } }) - Setting the delay between notifications
<vue-simple-notify :items="items" :delay="delay" ></vue-simple-notify>
new Vue({ el: '#app', components: { VueSimpleNotify }, data () { return { items: [{}, {}, {}], delay: 1000 } } }) - Listening to the @onDismiss event
<vue-simple-notify :items="items" @onDismiss="onDismiss" ></vue-simple-notify>
new Vue({ el: '#app', components: { VueSimpleNotify }, data () { return { items: [{}] } }, methods: { onDismiss: function onDismiss (index) { console.log(index) } } }) - Removing items from the component
<vue-simple-notify :items="items" ref="vsn" ></vue-simple-notify>
const vueSimpleNotify = new Vue({ el: '#app', components: { VueSimpleNotify }, data () { return { items: [{}, {}, {}] } } }).$refs.vsn vueSimpleNotify.dismiss(1) - Removing all elements
<vue-simple-notify :items="items" ref="vsn" ></vue-simple-notify>
const vueSimpleNotify = new Vue({ el: '#app', components: { VueSimpleNotify }, data () { return { items: [{}, {}, {}] } } }).$refs.vsn vueSimpleNotify.clear() Props
Available props in this component:
:itemsDescription: Notifications array.
Type: Array
Required: true
Default: null
<vue-simple-notify :items="[]"> :delay
Description: Time interval between notifications when displayed.
Type: Number
Default: 500
<vue-simple-notify :items="[]" :delay="1000"> Events
Available events in this component:
@onDismissIt is triggered each time a notification is dismissed.
onDismiss: function onDismiss (index) { }
| Attribute | Type | Description |
|---|---|---|
| index | Number |
Notification index. |
<vue-simple-notify :items="[]" :delay="1000" @onDismiss="onDismiss"> Methods
Available methods in this component:
dismissDismiss a notification by a index.
vueSimpleNotify.dismiss(index)
| Attribute | Type | Description | Required |
|---|---|---|---|
| index | Number |
Notification index. | true |
Clear all notifications.
vueSimpleNotify.clear() Tests
Clone the repository:
git clone https://github.com/Josantonius/vue-simple-notify.git vue-simple-notify
Go to the directory:
cd vue-simple-notify
Install dependencies:
npm install
Run unit tests:
npm run test
Run ESLint to ensure that code style is compatible with Standar JavaScript:
npm run lint
Run serve with hot reload:
npm run dev
Build distribution with minification:
npm run bundle
Build demo for production with minification:
npm run build
Run all the above:
npm run finish
Sponsor
If this project helps you to reduce your development time, you can sponsor me to support my open source work
LicenseThis repository is licensed under the MIT License.
Copyright © 2018-2022, Josantonius
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
