Question

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

Answer 1

您可以使用此代码段：

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>

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

1 个答案: