js中直接使用antdv的Message组件
平台默认提供的有全局提示组件是基于Message封装的可以直接在页面上拖拽组件使用,也可以不在页面中拖放组件直接在js调用ant-design-vue的Message
js中直接调用的时候需要注意在引用原始组件后必须要通过message的全局配置config方法设置getContainer属性,把 Message 挂载到指定的 HTML 节点,本案例中是通过#id或者.className挂载到相应节点上
具体实现如下:
1.添加引用和设置getContainer属性
import {message} from 'ant-design-vue';
message.config({
getContainer: () => document.querySelector('#pcx-page-root')
});
2.直接调用Message的info、error等函数,具体参数可以参考antdv官网Message组件说明
(1).info
message.info('This is a normal message');
(2).success
message.success('This is a success message',10);
(3).error
message.error({ content: <div><p>错误提示</p><p>换行显示</p></div>, duration: 2 });
(4).warning
message.warning({ content: 'This is a warning message', duration: 2 });