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 });

results matching ""

    No results matching ""

    results matching ""

      No results matching ""