euvl / vue-notification

:icecream: Vue.js 2 library for showing notifications

Home Page:http://vue-notification.yev.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Replacing only the data of the currently floating notification without generating a new notification

JUKOOK opened this issue · comments

Hello. I am making good use of vue-notification.
I am writing an issue to explain my case and get advice to everyone who uses this library.

Problem

I'm writing a code that notify data in a notification using a custom template (slot).

// custom template
<notifications group="custom-notify" position="bottom right">
  <template slot="body" slot-scope="{ item, close }">
      // markup notify display 'name', 'price', 'quantity' from item.data
  </template>
</notifications>

// this.$notify call
this.$notify({
  group: 'custom-notify',
  duration: 3000,
  data: {
    id: '1',
    name: 'A',
    price: 30000,
    quantity: 25,
  } // example data
})

// examples of data (occured randomly)
{
    id: '1',
    name: 'A',
    price: 30000,
    quantity: 25,
},
{
    id: '2',
    name: 'B',
    price: 2000,
    quantity: 3,
},
{
    id: '3',
    name: 'A',
    price: 29990,
    quantity: 3,
},
{
    id: '4',
    name: 'B',
    price: 2500,
    quantity: 100,
}

In this case(four example datas),

If this.$notify is called with an interval of 3 seconds or more (longer than the duration) in the order of the 4 objects above, the previous notification is cleared by the duration, so a total of 4 notifications will occur.

However, when this.$notify is called 4 times within 3 seconds, I want to initialize(reset) the duration(3 seconds) of the notification with the same name and change only the price and quantity of the notification (in the end, only 2 notifications for A and B are displayed.

I wonder if there are any ways or API option for this.

If not, may I ask for feature support?

Thank you

For Someone newcomers, here's a link to the good answer to my question.(In my case)

kyvg/vue3-notification#19