在使用message组件时失效

[ShuangxiHan]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.6

Environment

vue3.3.4 vite4.4.11

Reproduction link

https://next.antdv.com/components/message-cn

Steps to reproduce

1.先创建一个vue3项目；
2.按照官网指示全局引入ant-design-vue；
3.在页面中引入message后不生效（其他组件皆有效，我把版本降到3.2.20就生效了）

What is expected?

正常生效

What is actually happening?

message无效，没有全局提示

[cc-hearts]

能提供复现的代码吗？

[383366204]

我也有同样的问题，在360浏览器下message.success无法弹出

[qingtongq]

App.vue下添加

<style lang="less"> // 不能有scoped
.ant-message {
  left: 0;
}
</style>

[AshKilla]

我也遇到同意问题 ，更新到V4.0.06之后message与nofication全部失效

[AshKilla]

App.vue下添加

<style lang="less"> // 不能有scoped
.ant-message {
  left: 0;
}
</style>

我试了没用

[383366204]

我也有同样的问题，在360浏览器下message.success无法弹出

我发现了是style-provider在360浏览器下，虽然设置了priority=high，但是样式里的:where并没有去除，导致了样式没了

[sssx-li]

可以使用官方推荐的hooks写法；
import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();
const info = () => {
messageApi.info('Hello, Ant Design Vue!');
};
不过原来的写法更方便些，还是得等修复╮(╯▽╰)╭

[cc-hearts]

如果需要解决问题 可以给一个最小的复现代码。

[ShuangxiHan]

ant-bug-demo.zip
抱歉，最近太忙了，这是我写的问题代码

[ShuangxiHan]

另外，刚刚测试了一下，楼上所有的解决方案都是无效的，但是nofication这个组件我这里是生效的

[AshKilla]

ShuangxiHan ***@***.***>于2023年11月8日 周三13:28写道：

另外，刚刚测试了一下，楼上所有的解决方案都是无效的，但是nofication这个组件我这里是生效的 — Reply to this email directly, view it on GitHub <#7065 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG7TFXJHX5QWIRGMRQFS6FTYDMKAZAVCNFSM6AAAAAA6VNH4HOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBRGEYTONRSGM> . You are receiving this because you commented.Message ID: ***@***.***>

我试了楼上的方法 已经可以了

[cc-hearts]

ant-bug-demo.zip 抱歉，最近太忙了，这是我写的问题代码

感谢 我定位到问题了

[ShuangxiHan]

哪种方法，我加了个<style>,启动直接报错

[cc-hearts]

<template>
  <div>
    <a-space wrap>
      <a-button type="primary" @click="fun1">message基础写法</a-button>
      <a-button @click="fun2">message基础写法</a-button>
      <a-button @click="() => openNotificationWithIcon('success')">notification</a-button>
    </a-space>
  </div>
</template>

<script setup>
import { message, notification } from 'ant-design-vue';
// eslint-disable-next-line no-unused-vars
const [messageApi, contextHolder] = message.useMessage();
const fun1 = () => {
  message.info('我出现了');
};
const fun2 = () => {
  messageApi.info('我出现了');
};
const openNotificationWithIcon = type => {
  notification[type]({
    message: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  });
};
</script>

<style>
.ant-message {
  left: 50%;
  transform: translateX(-50%);
}
</style>

[Wa-Fe]

可以使用官方推荐的hooks写法； import { message } from 'ant-design-vue'; const [messageApi, contextHolder] = message.useMessage(); const info = () => { messageApi.info('Hello, Ant Design Vue!'); }; 不过原来的写法更方便些，还是得等修复╮(╯▽╰)╭

这个写法我看了下官方的文档，好像是 App 包裹组件 来实现的，在顶层使用

<a-config-provider>
  <a-app>...</a-app>
</a-config-provider>

但是我在使用过程中，使用官方的推荐的自动按需引入功能的时候，

import AutoImport from "unplugin-auto-import/vite"
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers"
import Components from "unplugin-vue-components/vite"

export default defineConfig({
  "plugins": [
    vue(),
    AutoImport({
      "imports": ["vue", "vue-router",],
      "resolvers": [AntDesignVueResolver()]
    }),
    Components({
      "resolvers": [AntDesignVueResolver({ importStyle: false, resolveIcons: true })],
      // 自动导入的路径
      "dirs": ["src/components"],
      // 按需引入的文件的类型
      "extensions": ["vue"],
    }),

})

如果在页面中直接使用

<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>

这种的是没有问题的，组件可以自动引入，不用在手动写import，

但是在 App.vue文件中，使用的话

<template>
  <a-config-provider>
    <a-app>
      <router-view />
    </a-app>
  </a-config-provider>
</template>
<script setup>
</script>
<style scoped lang="scss"></style>

会提示一个错误

Failed to resolve component: a-app
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

即使手动在这个文件中引入,也不起作用

import { App } from "ant-design-vue"

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.