小编Joh*_*nes的帖子

我需要捕获 Vue.js 应用程序中用户触发的所有点击事件。我的第一步是向#appdiv 添加一个 onclick 监听器：

<div id="app" @click="onClickApp"></div>
// ...
<script>
  export default {
    methods: {
      onClickApp() {
        // increment counter in vuex store
      }
   }
</script>

这会捕获直接在 App 组件内部发生的所有点击事件。问题是我正在使用 Bootstrap Modal（通过 BootstrapVue 提供），并且我还需要捕获其中的点击。<b-modal></b-modal>即使我在组件上设置另一个 @click 监听器（vue-cli 的语法），这目前也不起作用。

这就是我也尝试过的（在main.js）：

new Vue({
  router,
  store,
  render: h => h(App),
  mounted: function() {
    this.$el.addEventListener('click', this.onClickVue)
  },
  beforeDestroy: function () {
    this.$el.removeEventListener('click', this.onClickVue)
  },
  methods: {
    onClickVue: function (e) {
      this.$store.commit(mutationTypes.INCREMENT_CLICKS)
    }
  });

同样的问题，Bootstrap Modals 内的点击不会触发点击事件。

我想在 CSS 中实现这一点，对所有屏幕尺寸都有效：

从我的屏幕左侧到中间，背景应该是蓝色，从中间上到右下角，背景应该是白色。这是我已经得到的：

<style>
.wrapper {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #297fca;
}
.right {
    position: fixed;
    z-index: 2;
    top: -70%;
    right: -50%;
    background: #fff;
    width: 100%;
    height: 100%;
    transform: translateY(50%) rotate(45deg);
  }
</style>
...
 <div class="wrapper">
    <div class="right">
    </div>

  </div>

这适用于某些屏幕尺寸，但不是通用解决方案。我正在寻找仅使用 CSS 的解决方案。如果这是不可能的，SVG apporach 也可以。

提前致谢。