Ant Design通知组件无法在Vue中显示，点击按钮没反应？

你的问题我遇到过，确实是挺让人头疼的。Ant Design 的通知组件 notification 和 Vue 项目结合时确实容易踩坑。咱们来一步步分析下原因和解决办法。

### 问题根源
notification 是一个全局组件，它不像其他组件那样可以直接挂载到 DOM 上，而是需要单独初始化。如果直接用 notification.open() 调用，但没有正确初始化或挂载点不对，就会出现点击没反应的情况。

具体来说，你当前的代码中缺少了对 notification 的正确引入和初始化步骤。即使你引入了 ant-design-vue 的样式文件，这个组件本身还需要额外的操作才能正常工作。

---

### 解决方案

#### 1. 确保正确引入 notification
你需要从 antd 中显式引入 notification 模块。不能只是全局引入 ant-design-vue，因为 notification 是一个独立的模块。

修改你的代码如下：

// 在 script 部分顶部添加以下内容

import { notification } from 'ant-design-vue';



export default {

  methods: {

    showNotif() {

      // 使用 notification.open() 方法打开通知

      notification.open({

        message: '测试通知',

        description: '这是一条测试消息',

        duration: 3, // 可选：设置通知显示时长，默认是 4.5 秒

      });

    }

  }

};

这里的关键是显式地 import { notification }，而不是依赖全局引入。这是因为在按需加载的情况下，notification 不会被自动包含。

---

#### 2. 确保样式文件已正确引入
虽然你说已经引入了 ant-design-vue 的样式文件，但还是建议检查一下是否正确加载了所有相关的 CSS。可以通过以下方式确保样式完整加载：

如果你使用的是完整的 ant-design-vue 包，确保在 main.js 或入口文件中有以下代码：

import 'ant-design-vue/dist/antd.css';

如果你使用的是按需加载（比如通过 babel-plugin-import），需要手动配置 notification 的样式加载。可以在 .babelrc 或相关配置文件中添加：

{

  "plugins": [

    ["import", {

      "libraryName": "ant-design-vue",

      "libraryDirectory": "es",

      "style": "css" // 确保加载样式

    }]

  ]

}

---

#### 3. 检查 Vue 的上下文环境
有时候 this 的指向可能会有问题，尤其是在复杂的 Vue 生命周期或者组合函数中。不过你当前的代码结构看起来没问题，应该不会影响到 notification 的调用。

如果你仍然担心，可以尝试在方法中强制绑定 this：

methods: {

  showNotif: function () {

    notification.open({

      message: '测试通知',

      description: '这是一条测试消息',

    });

  }.bind(this) // 明确绑定 this

}

不过这种情况很少见，一般不需要这么麻烦。

---

#### 4. 验证是否渲染成功
有时候通知会因为某些原因被遮挡或隐藏，导致你以为它没生效。可以在控制台手动调用一次 notification.open() 来验证：

notification.open({

  message: '调试通知',

  description: '如果能看到这条消息，说明通知功能正常。',

});

如果控制台调用能正常弹出通知框，那说明问题出在按钮绑定上；如果仍然看不到，那就是初始化或样式加载的问题。

---

### 最终代码示例
以下是完整的代码示例，供你参考：

<template>

  <button @click="showNotif">显示通知</button>

</template>



<script>

// 引入 notification 模块

import { notification } from 'ant-design-vue';



export default {

  methods: {

    showNotif() {

      notification.open({

        message: '测试通知',

        description: '这是一条测试消息',

        duration: 3, // 设置通知显示时长

      });

    }

  }

};

</script>



<!-- 确保样式已正确引入 -->

<style>

@import '~ant-design-vue/dist/antd.css';

</style>

---

### 总结
这个问题主要是因为 notification 没有正确引入或初始化导致的。按照上面的步骤调整后，应该就能正常运行了。如果还有问题，可以进一步检查是否有其他冲突的库或者样式覆盖。

最后提醒一句，Ant Design 的文档有时候会忽略一些细节，像这种全局组件的特殊用法就需要多留意一下官方示例代码。开发者嘛，踩坑是常事，别灰心！

你漏了引入 notification 的 JS 功能，不是只加样式就够的。

在入口文件 main.js 加这行：

import { Notification } from 'ant-design-vue';  

Vue.prototype.$notification = Notification;

然后组件里用 this.$notification.open(...) 搞定。