桌面端弹出类组件

桌面端提供的弹出类组件包括：全局提示、通知提醒框、警告提示、文字提示、气泡卡片、确认对话框、气泡确认框、对话框、抽屉、弹出层、加载中等组件，运行效果如下面几幅图所示

• 全局提示

• 通知提醒框

• 警告提示

• 文字提示

• 气泡卡片

• 确认对话框

• 气泡确认框

• 对话框

• 抽屉

• 弹出层

• 加载中-功能页遮罩

• 加载中-全屏遮罩

全局提示

全局提示组件用于在界面顶部显示一个提示，支持自动消失，支持成功、失败、消息、警告等四种类型，如下图所示

全局提示组件提供“显示”操作，设置“内容”和“类型”属性，设计界面如下图所示

全局提示组件提供静态方法：success、error、info、warning，先引用 message，再调方法

• React 示例代码如下

import { message } from 'antd';
...
message.info("删除角色执行成功！");//默认显示3s
message.info("删除角色执行成功！",10);//显示10s

• Vue 示例代码如下

import {message} from 'ant-design-vue';
...
message.info("删除角色执行成功！");//默认显示3s
message.info("删除角色执行成功！",10);//显示10s

通知提醒框

通知提醒框组件用于在界面四个角（左上、右上、左下、右下）显示一个通知，支持自动关闭，支持成功、失败、消息、警告等四种类型，如下图所示

通知提醒框组件提供“显示”操作，设置标题、内容、通知类型、弹出位置等属性，设计界面如下图所示

通知提醒框组件提供静态方法：success、error、info、warning，参数包括通知标题 message 和通知内容 description。先引用 notification，再调方法

• React 示例代码如下

import { notification } from 'antd';
...
notification.error({message:"请先添加工作流应用"});

• Vue 示例代码如下

import {notification} from 'ant-design-vue';
...
notification.error({message:"请先添加工作流应用"});

警告提示

警告提示组件用于在界面上显示一个提示，支持成功、失败、信息、警告等四种类型，如下图所示

通过设置标题、内容、通知类型、弹出位置等属性实现显示效果，设计界面如下图所示

显示隐藏

使用“动态隐藏”属性，控制组件是否显示，本例当“页面数据.显示警告提示”为真时显示，否则隐藏，设计界面如下图所示

在组件的“关闭后事件”中，设置“页面数据.显示警告提示”为假，设置隐藏

在需要显示的时候，设置“页面数据.显示警告提示”为真，显示警告提示

动态类型

类型根据数据动态设置。由于组件要求类型不能为空，因此需要采用特殊写法，如下面的代码所示，其中

• 提示内容 message 属性绑定 pageData 的 redisVal 列
• 类型 type 属性绑定 pageData 的 state 列，$page.$compRefs 是固定写法

<antdpro:Alert banner="true" closable="false" id="alert0" message="{pageData.current?.redisVal}" type="{$page.$compRefs?.pageData?.current?.state}">
</antdpro:Alert>

文字提示

文字提示组件用于给某个组件增加一个文字提示，支持悬停、点击、右键、获取焦点等四种触发行为，支持设置显示位置，运行效果如下图所示

文字提示组件内部的组件，就是触发显示文字提示的组件。通过设置文字提示组件的提示文字、触发行为、位置、颜色等属性实现显示效果，设计界面如下图所示

气泡卡片

气泡卡片组件用于给某个组件增加一个提示，提示中可以包含任意内容，支持悬停、点击、右键、获取焦点等四种触发行为，支持设置显示位置，运行效果如下图所示

气泡卡片组件内部的组件，就是触发显示气泡卡片的组件。气泡卡片组件支持通过“显示”进入可视化开发，通过“提示配置”设置触发行为、位置、颜色等属性实现显示效果，设计界面如下图所示

确认对话框

确认对话框用于在界面上显示一个确认对话框，提供给用户选择确定还是取消，运行效果如下图所示

Modal 提供静态方法 confirm 显示确认对话框，方法定义如下，先引用 Modal，再调方法

方法名：
    Modal.confirm

参数：
    title：标题
    content：内容
    getContainer：指定 Modal 挂载的节点，固定写法
    icon：自定义图标
    okText：确认按钮文字
    cancelText：取消按钮文字
    onOk：点击确定按钮的回调
    onCancel：点击取消按钮的回调

• React 示例代码如下

import React from "react";
import {Modal} from "antd";

        Modal.confirm({          
            title: '提示',
            content: '提示内容',
            getContainer:() => document.querySelector('#pcx-page-root'),
            okText: "确定",
            cancelText: "取消",
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            }
        });

• Vue 示例代码如下

import { Modal as modal } from 'ant-design-vue';

        modal.confirm({
            title: '提示',
            content: '提示内容',
            getContainer:() => document.querySelector('#pcx-page-root'),
            okText: "确定",
            cancelText: "取消",
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            }
        });

气泡确认框

气泡确认框组件用于给某个组件增加一个确认框提示，提供给用户选择确定还是取消，支持悬停、点击、右键、获取焦点等四种触发行为，支持设置显示位置，运行效果如下图所示

确认框支持设置标题、描述、图标、确定按钮、取消按钮和提示配置，如下图所示

弹出层

弹出层组件用于显示一个对话框，提供标题、内容区、操作区，运行效果如下图所示

内容区

弹出层组件的内容区可以拖放任意组件，这些组件和弹出层组件外的组件都在同一个 W 页面中

操作区

弹出层自带确定、取消按钮，及其事件，点击按钮后触发相应事件，设计界面如下图所示

点击确定按钮会关闭弹出层，调用 event.preventDefault(); 可阻止弹出层的关闭，通常用于关闭时的条件判断，示例代码如下

    onModal3Ok = (event) => {
        message.warning("不满足条件，不关闭");
        event.preventDefault();
    }

自定义操作区

弹出层组件支持自定义操作区，在源码中增加 footer="" 属性，源码如下，这样设置后不会触发弹出层的确定、取消事件

<antdpro:Modal cancelText="取消" footer="" id="modal2" okText="确定" ref="modal2" title="弹出层标题"/>

在弹出层中添加按钮组件，实现确定、取消按钮功能，设计界面如下图所示

在按钮的点击事件中，调用弹出层组件的 hide 方法，关闭弹出层，代码如下

react 代码

    onOkBtnClick = (event) => {
        this.comp("modal2").hide();//关闭弹出层
    }

vue 代码

    let onOkBtnClick = (event) => {
        $page.comp("modal2").hide();//关闭弹出层
    }

使用原生 Modal 组件

系统提供的弹出层组件是基于原生 Modal 组件封装的，可以直接在页面上拖拽组件使用，也可以不在页面中拖放组件，直接在 js 文件中调用原生 Modal 组件的静态方法。js 中直接调用的时候需要注意：必须设置 getContainer 属性，指定 Modal 的挂载节点

原生 Modal 组件用于在界面上显示一个对话框，支持成功、失败、消息、警告等四种类型，如下图所示

原生 Modal 组件提供静态方法：success、error、info、warning，先引用 Modal，再调方法

react 添加引用

import { Modal } from 'antd';
import React, { createContext } from 'react';//在 content 中写 html 节点时需要引用

vue 添加引用

import {Modal} from 'ant-design-vue';

调用 Modal 的 info、success、warning、error 等方法，示例代码如下

    Modal.info({
        title: 'info!',
        content: 'info提示',
        getContainer:() => document.querySelector('#pcx-page-root')
    })

content 支持 html 片段，示例代码如下：

    Modal.info({
        title: 'confirm!',
        content: <div><p>confirm提示</p><p>换行显示</p></div>,
        getContainer:() => document.querySelector('#pcx-page-root')
    })

对话框

对话框组件用于显示一个对话框，对话框里面嵌入一个 w 页面，运行效果如下图所示

在父页面中添加对话框组件，打开子页面

• 调用对话框组件的打开 open 方法，打开子页面，同时给子页面传参
• 子页面打开后，使用 this.params 获取传入的参数
• 子页面使用确定返回 okCLose 或 发送消息 postMessage 将数据返回父页面
• 父页面的对话框组件通过数据映射或接收消息事件，接收子页面返回的数据

具体使用方法，参考《页面交互》

抽屉

抽屉组件用于从屏幕边缘显示一个面板，抽屉里面可以直接拖放组件，也可以嵌入一个 w 页面，运行效果如下图所示

抽屉组件中直接放组件，使用方法同弹出层；嵌入一个页面，使用方法同对话框。嵌入页面的具体使用方法，参考《页面交互》

设置挂载节点

抽屉默认给整个门户增加遮罩，即全屏显示，然后在其上显示抽屉，如上图所示

抽屉组件提供“挂载节点”属性，设置遮罩的覆盖区域，即非全屏显示，如下图所示

实现方法：在抽屉组件上，通过 rootStyle 属性设置定位方式为绝对定位，并设置挂载节点函数

• 设置 rootStyle 属性：设置为定位方式=绝对定位 absolute

react 代码

<antdpro:Drawer rootStyle="position:absolute;" getContainer="{$page.drawer0GetContainerFn()}" id="drawer0" pagePath="$UI/pcx/interactive/popup-page.w">

vue 代码

<antdv:Drawer rootStyle="position:absolute;" getContainer="{drawer0GetContainerFn()}" id="drawer0" pagePath="$UI/pcx/interactive/popupPage.w">

• 设置挂载节点函数：在函数中返回挂载节点

示例一：设置遮罩的区域为当前页面，挂载节点函数代码如下

react 代码

    drawer0GetContainerFn = () => {
        let pageRoot = this.getPage().renderRoot;
        return pageRoot;
    }

vue 代码

let drawer0GetContainerFn = () => {
    let pageRoot = $page.getPage().renderRoot;
    return pageRoot;
}

示例二：设置遮罩的区域为当前页面中拥有 drawerParent 样式的元素，在元素上添加样式 drawerParent，如下图所示

挂载节点函数代码如下

react 代码

drawer0GetContainerFn = () => {
    let pageRoot = this.getPage().renderRoot;
    return pageRoot.querySelector(".drawerParent");
}

vue 代码

let drawer0GetContainerFn = () => {
    let pageRoot = $page.getPage().renderRoot;
    return pageRoot.querySelector(".drawerParent ");
}

drawerParent 样式必须设置为相对定位

.drawerParent{
    position:relative;
}

加载中

加载中组件提供两种遮罩模式，如下面两幅图所示

• 仅在功能页面上显示遮罩

• 全屏显示遮罩

一般情况不需要使用加载中组件，数据组件的数据加载和通过 this.request 发送请求时，系统会自动显示遮罩，特殊场景需要显示遮罩时，提供下面两种方式

• 方式一：使用加载中组件

加载中组件的属性说明

• 加载中属性：设置为是，显示遮罩，设置为否，不显示遮罩
• 全屏属性：设置为是，显示全屏遮罩，设置为否，在包裹组件上显示

全屏遮罩的加载中组件，无需包裹组件，设计界面如下图所示

非全屏遮罩的加载中组件，需要包裹组件，仅在被包裹的组件上显示遮罩，设计界面如下图所示

• 方式二：写代码

调用页面组件的 setState 方法，给 loading 赋值为 true，则显示遮罩，赋值为 false，则不显示遮罩，更多加载设置可设置loading为对象，例如“{loading:{fullscreen:true}}”，属性内容可参考 antdpro 下 spin 组件配置，代码如下

//react
//显示加载
this.setState({loading:true});
this.setState({loading:{fullscreen:true,tip:"加载中..."}});//更多加载属性可以参考antdpro官网

//隐藏加载
this.setState({loading:false});
this.setState({loading:{}});

//vue
//显示加载
$page.setState({loading:true});
$page.setState({loading:{fullscreen:true,tip:"加载中..."}});//更多加载属性可以参考antdpro官网

//隐藏加载
$page.setState({loading:false});
$page.setState({loading:{}});

弹出类组件

弹出类组件提供很多属性用于界面展现和用户交互，鉴于官网介绍的比较详细，本文不再赘述。

案例位置

桌面-页面-页面交互-弹出类组件.w

桌面-页面-页面交互-弹出页面.w