vue3在js文件中使用antdesign-vue的message组件

Question

关于antdesign4.0版本无法在js中调用message

版本：vue3+ vite+ antdesign-vue
"ant-design-vue": "^4.0.6",
"vue": "^3.3.4",
"vite": "^4.4.5"

需求背景：在封装的接口请求文件request.js中想要在接口返回失败时，使用message提示报错
request.js代码：

import {
  message
} from "ant-design-vue";

// 。。。略过封装代码

if (res.status && res.status >= 200 && res.status < 300) {
    if (result && result.code == 0) {
       return result
    }
}else{
  message.error(result.msg)
}

可以在方法中打印出message的实例，调用其中方法没有反应，也没有任何报错。如果我想在js文件中使用message提示，我该怎么做

另外：在vue文件中引入message，直接使用.success等方法也是一样，必须使用messageApi才有效

<template>
  <contextHolder/>
</template>

<script setup>
import { Button, Checkbox, Modal, message } from 'ant-design-vue'
const [messageApi, contextHolder] = message.useMessage();

messageApi.success('刷新成功')
</script >

初步猜测是因为antdesign4.0.6版本bug。

Answer 1

【以下回答由 GPT 生成】

对于Vue3的JavaScript文件中使用Ant Design Vue的Message组件，可以按照以下步骤进行操作：

1. 确保你已经安装了Ant Design Vue和Vue3的相关依赖，可以通过以下命令安装：

npm install ant-design-vue@next vue@next

1. 在你的JavaScript文件中，通过引入Ant Design Vue的message模块：

javascript import { message } from "ant-design-vue";

1. 创建一个messageApi实例来使用Message组件的方法：

javascript const messageApi = message.create();

1. 现在，你就可以在需要的地方使用messageApi来调用Ant Design Vue的Message组件的方法了，例如：

javascript messageApi.success('刷新成功');

注意：如果你使用的是Vue3的Composition API语法，可以将messageApi作为响应式数据进行处理。

完整的代码示例如下：

import { message } from "ant-design-vue";

const messageApi = message.create();

// 封装的接口请求代码
function handleResponse(res) {
  const result = res.data;
  if (res.status && res.status >= 200 && res.status < 300) {
    if (result && result.code === 0) {
      return result;
    }
  } else {
    messageApi.error(result.msg);
  }
}

这样，你就可以在Vue3的JavaScript文件中使用Ant Design Vue的Message组件进行错误提示了。

如果你遇到了无法调用Message组件的问题，可以尝试升级Ant Design Vue的版本到最新版本，并检查是否引入了Ant Design Vue的样式。如果问题仍然存在，可能需要等待Ant Design Vue官方发布修复该问题的版本。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^