vue单文件组件在同一个页面调用，单文件中的点击其他区域隐藏事件

需求：点击.right-box 显示彩虹币浮层，点击其他区域隐藏彩虹币浮层

遇到的问题：
1、点击第一个.right-box，第一个彩虹币浮层显示；
2、点击第二个.right-box，第二个彩虹币浮层显示，第一个彩虹币浮层未隐藏

期望结果：
1、点击.right-box，只显示当前彩虹币浮层，其他彩虹币浮层都隐藏；
2、点击非.right-box区域，所有前彩虹币浮层都隐藏

产生问题的原因：
.right-box的点击事件添加了阻止冒泡，点击任何一个right-box，都不会触发全文的点击事件
添加阻止冒泡是因为整个页面添加了点击隐藏彩虹币浮层的事件，如果不阻止冒泡为了让点击彩虹币浮层显示出来，

解决方案：
给全文绑定点击事件时，允许捕获，这样即使点击.right-box也会触发全文的点击事件

父组件：

<template>
  <div v-for="item in detailList" :key="item.rid" >
    <son :rainbowB="item.coin" :isOpenCoin="true"></son>
  </div>
</template>

子组件：

<template>
<!-- 点击事件要统一，不能有的用click，有的用touchstart -->
  <div class="right-box" @touchstart.stop="openCoin">
    <!-- 彩虹币浮层 -->
    <div
      v-if="isOpenCoin"
      v-show="showOpenCoin"
    >
      <span>{{ rainbowB }}</span>
    </div>
    <p>{{ rainbowB | numberFormat }}</p>
  </div>
</template>

<script>
export default {
  name: "rainbowB",
  data() {
    return {
      showOpenCoin: false
    };
  },
  props: {
    rainbowB: {
      type: Number,
      default: 0
    },
    rainbowType: {
      type: String,
      default: 'rainbowB'
    },
    // 是否加载彩虹币浮层
    isOpenCoin: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.clickOtherHidden();
  },
  methods: {
    openCoin() {
      if (this.isOpenCoin) return (this.showOpenCoin = !this.showOpenCoin);
    },
    hideOpenCoin() {
      if (this.showOpenCoin) return (this.showOpenCoin = false);
    },
    // 点击
    clickOtherHidden() {
      document.addEventListener('touchstart', this.hideOpenCoin, true);
    }
  },
  beforeDestroy() {
    document.removeEventListener('touchstart', this.hideOpenCoin);
  }
}
</script>