[Vuejs]-How can i close the vue popover when i scroll the screen

by

4👍

You can use this snippet:

new Vue({
  el: "#app",
  methods: {
    do_sth() {
      this.$root.$emit('bv::hide::popover')
    }
  },
  created () {
      window.addEventListener('scroll', this.do_sth);
  },
});
body .wrapper {
    padding: 100px 20px;
    min-height: 2000px;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
<div class="wrapper">
<b-button
  href="#"
  tabindex="0"
  v-b-popover.click="'Popover content'"
  title="Popover title"
>
  Link button with popover directive
</b-button>

</div>

</div>
👤Iman Shafiei

Leave a comment