0

I'm wondering if it is possible to modifiy the notification system of buefy so that it closes itself when I click anywhere on the notification, not just on the x-cross generated by closable: true.
I have been looking for solutions to change the default behavior of buefy elements, but I haven't found anything coming close (no pun intended). Any help would be very much appreciated.

edit: I want to close the notification by clicking on it, not outside of it. But I don't know how to attach the onClick behaviour to the buefy element as a whole.

musaya
  • 123
  • 1
  • 2
  • 10

2 Answers2

1

Actually you need to catch click anywhere on the page and then:

isActive = !isActive

The question how to catch click outside the element is answered here: Detect click outside element But watch out! Preferred answer is not working in Vue.js 2. You can try to use this package: https://github.com/MuTsunTsai/vue-on-clickout

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Justice47
  • 682
  • 6
  • 16
  • 1
    Glad that you mentioned the package I created; however, if one simply needs to detect "click anywhere" event, one really should just add an event handler on the document itself, not by adding both "click" and "clickout" events on the same element and perform the same task in them. – Mu-Tsun Tsai Nov 14 '19 at 02:17
0

You could use v-clickaway to detect click outside your element:

Vue-clickaway

and then set your flag to true

Loki
  • 1,064
  • 2
  • 26
  • 55