Question

我有一个简单的popUp组件，可以在整个应用程序中使用，通过在点击时发出事件来调用它。弹出窗口有两种类型，成功和危险。成功弹出窗口应在5秒钟后自行消失，单击x符号后，危险应关闭。目前，它的工作方式与我创建它的方式相同，但是如果用户创建了多个以上的popup，然后一次成功，一次又一次成功，则5秒后消失的不是成功一次。如何使成功弹出窗口在5秒钟后正确消失？我在这里这样称呼它，但似乎无法正确删除它们：

if(obj.type === 'success') {
   setTimeout(this.closePopUp, 5000);
  }

这是我的代码：

<template>
  <div class="popUp-wrapper">
    <div
      v-for="item in allItems"
      :key="item.id"
      :class="['popUp', `popUp--type--${item.newPopUpType}`]"
    >
      <div class="popUp-side">
        <p class="exclamation-mark">!</p>
      </div>
      <h5 class="popUp-message">{{item.message}}</h5>
      <div class="popUp-side">
        <p class="closing-x" @click="closePopUp(item)" v-if="item.newPopUpType 
        === 'danger'">X</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data: () => ({
    allItems: []
  }),
  methods: {
    closePopUp(item) {
      const index = this.allItems.indexOf(item);
      this.allItems.splice(index, 1);
    },
    onPopUpCall(obj) {
      var newPopUp = {
        newPopUpType: obj.type,
        message: obj.message,
        id: obj.id
      };

      if(obj.type === 'success') {
        setTimeout(this.closePopUp, 5000);
      }
      this.allItems.push(newPopUp);
    }
  },

  created() {
    this.$root.$on('call-popUp', this.onPopUpCall);
  },
  destroyed() {
    this.$root.$off('call-popUp', this.onPopUpCall);
  }
};
</script>

Answer 1

closePopUp需要一个基于您未提供的代码的item实参。

尝试一下：

if(obj.type === 'success') {
    setTimeout(() => this.closePopUp(newPopUp), 5000);
}

如何正确删除弹出窗口

1 个答案: