Inspired by @VitorLuizC idea.
✨ Example✨
Install
yarn add vue-coe-feedback
or
npm i add vue-coe-feedback
Configuration
Vuehow to use?
- inside the component:
this.$feedback.add({ type, message, highlighted })
or
this.$feedback.remove({ type, message, highlighted })
- inside the store:
actions: {
SOME_ACTION: ({ commit, dispatch }) => {
...
dispatch('FEEDBACKS_ADD', { type, message, highlighted })
or
dispatch('FEEDBACKS_REMOVE', { type, message, highlighted })
...
}
}
options type
- info
- success
- error
Example
<template> <div id="app"> <coe-feedback @close="feedback => $feedback.remove(feedback)" :feedbacks="$feedback.list" /> <button @click="onSucces">show feedback success</button> <button @click="onInfo">show feedback info</button> <button @click="onError">show feedback error</button> <button @click="onCoe">set coe</button> </div></template> <script>import { CoeFeedback } from 'vue-coe-feedback' export default { components: { CoeFeedback }, methods: { onSucces () { this.$feedback.add({ type: 'success', message: 'A sua compra foi', highlighted: 'aprovada!' }) }, onInfo () { this.$feedback.add({ type: 'info', message: 'INFO' }) }, onError () { this.$feedback.add({ type: 'error', message: 'ERROR' }) }, onCoe () { this.$store.dispatch('COE', { type: 'success', message: 'COÉ MANÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉ!' }) } }}...</script>Options: plugin instance
| Name | Default | Required | About |
|---|---|---|---|
| storeName | coefeedback |
false |
store name |
| delay | 5000 |
false |
delay for notifications to disappear |
component props
| Name | Default | Required | About |
|---|---|---|---|
| feedbacks | [] |
false |
list of feedbacks |
| info | #b4b4b4 |
false |
info color |
| success | #59efb2 |
false |
success color |
| error | #ef5959 |
false |
error color |
Events
- close
Slots: component
- feedbacks (slot-scope: feedback, info, success, error)
- message
- button