ant design vue中通知提醒框Notification的使用

效果:点击接口,出现提示弹框,数据获取到后在消失
ant design vue中通知提醒框Notification的使用_第1张图片

<template>
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
<script>
const close = () => {
  console.log(
    'Notification was closed. Either the close button was clicked or duration time elapsed.',
  );
};
export default {
  methods: {
    openNotification() {
      const key = `open${Date.now()}`;
      this.$notification.open({
        message: 'Notification Title',
        description:
          'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
        key,
        onClose: close,
      });

	axios
        .post(
          this.$store.state.windowCONTENT +
            "distributeFile/uploadDataFileFromBastion",
          uploadBljObj
        )
        .then((res) => {
          if (res.data.success == 0) {
            this.$notification.close(key);
            this.$message.success("堡垒机下载成功");
          } else {
            this.$notification.close(key);
            this.$message.error(res.data.data);
          }
        });
    },
  },
};
</script>

你可能感兴趣的:(ant,design,vue爬坑日记)