近日在使用antdesignvue进行项目开发,在需要使用message组件时,在对应的页面进行了引用,但是页面却无法显示出弹框
检查样式、组件库文件引入都没问题,在看页面元素结构使发现:
message组件并非没有渲染,而是被插入到了body下,和 id为app的项目元素并列为兄弟元素了,所以无法看到组件的提示效果。
根据官方文档:Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
getContainer 属性用于配置渲染节点的输出位置,而默认值就是body元素,所以使用全局配置,将渲染节点输出到项目节点中,就可以成功显示message组件了。
代码:
message.config({
getContainer: () => document.getElementById("app"),
top: `100px`,
});
效果: