vue-coe-feedback
<h1 align="center">vue-coe-feedback ✅</h1>
Last updated a year ago by viniazvd .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-coe-feedback 
SYNC missed versions from official npm registry.

vue-coe-feedback ✅

License


Example


Install
yarn add vue-coe-feedback or npm i add vue-coe-feedback

Configuration

import Vue from 'vue'

import { VueCoeFeedback } from 'vue-coe-feedback'

Vue.use(VueCoeFeedback, store, options)

how 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

Inspired by @VitorLuizC idea.

Current Tags

  • 0.1.5                                ...           latest (a year ago)

15 Versions

  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (12)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |