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

一时失言乱红尘 2021-07-24 11:22 4369阅读 0赞

效果：点击接口，出现提示弹框，数据获取到后在消失  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/0c638a2fb9e646708bf26a9048586117.png