Question

我有一张Vue卡，上面显示着成功消息。我具有一项功能，如果用户单击ok按钮，该卡将消失。除此之外，即使没有单击该按钮，我也希望它在几秒钟后自动消失。我怎样才能做到这一点？这是我的组件：

<template>
  <div v-if="show" class="notifications">
    <div class="globalSuccessWrapper">
      <v-layout>
        <v-flex xs12 sm6 offset-sm3>
          <v-card flat color="green">
            <v-card-title primary-title>
              <div>
                <h3 class="headline">Neu Benutzer angelegt</h3>
                <div>{{ card_text }}</div>
              </div>
            </v-card-title>
            <v-card-actions>
                <div class="close"><v-btn @click="removeMessage(0)">Ok</v-btn></div>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      card_text: 'Success!',
      show: true,
      notificationsToDisplay: [],
      graphQLNotifications: [],
    };
  },
  methods: {
    removeMessage(seconds, timeout) {
      if (!timeout) {
        setTimeout(() => {
          this.show = false;
        }, seconds * 1000);
      } else {
        timeout(seconds);
      }
    },
  },
};
</script>

<style scoped lang="scss">
  .globalSuccessWrapper {
    position: absolute;
    z-index: 10000;
    width: 100%;
  }
</style>

我想在removeMessage下的else情况下，在timeout中添加此功能

Answer 1

您无法在removeMessage上执行此操作，因为您希望不按按钮就可以执行此操作。

您应watch对data.show进行更改。有关如何执行此操作的详细信息here。

当值设置为true时，在watch内，您可以设置超时并保存由setTimeout返回的标识符。超时应将data.save设置为false，这将关闭通知。当值变为false时，您还需要清除removeMessage内部或watch方法内部的超时。

您需要清除通知关闭时的超时，以防止以下行为：

打开通知
用户点击关闭按钮
在关闭超时期间打开另一个通知
超时触发，第二个通知过早关闭

几秒钟后如何自动删除Vuetify卡

1 个答案: