滚动屏幕时如何关闭vue弹出窗口

Question

我还没有为 Vue 决定任何弹出框。 设备是触控设备 对于触摸设备，我需要单击事件来打开弹出框。 设想： 我使用了 Vue 引导弹出框或工具提示 当我滚动时它卡在屏幕上。 滚动时需要删除

Answer 1

你可以使用这个sn-p：

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>