五、反馈组件

五、反馈组件

1、Alert警告提示

警告提示，展现需要关注的信息。

何时使用：<1>当某个页面需要向用户显示警告的信息时。。<2>非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

2、Drawer抽屉

屏幕边缘滑出的浮层面板。点击之后，从屏幕边缘滑出一个块，然后可以在这个块里面写很多的内容进去。这个和modal是差不多的，只不过是样式不一样而已。由于这个Drawer组件没有footer属性，所以如果想要设置Drawer底部的按钮需要自己去设置(一般就用position来搞)。

何时使用：<1>当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。。<2>当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

• (0)<Drawer>组件对应的事件
  • <1>onClose事件: 表示点击遮罩层或右上角叉或取消按钮的回调.可选值：无；默认值： -；类型：function(e)
  • <2>afterVisibleChange事件: 表示切换抽屉时动画结束后的回调.可选值：无；默认值： -；类型： function(visible)

• (1)<Drawer>组件对应属性: 这个组件可以包含其它组件，被包含的组件就会作为抽屉里面的内容。这个Drawer会出一个bug，好像是升级antd版本就可以了
  • <1>closable: 表示是否显示右上角的关闭按钮.可选值：无；默认值： true；类型：boolean
  • <2>destroyOnClose: 表示关闭时销毁 Drawer 里的子元素.可选值：无；默认值： false；类型：boolean
  • <3>getContainer: 表示指定 Drawer 挂载位置，这个挂载位置即表示Drawer组件的父元素是谁。默认body，即Drawer组件是在body里面打开的。如果设置这个值为false，则这个Drawer组件只在它的父元素里面打开，即只在父元素的范围里面生效。和modal组件一样，如果要在Drawer组件里面使用ref或者使用css，必须把这个值设置为false.可选值：无；默认值： ‘body’；类型：HTMLElement | () => HTMLElement | Selectors | false
  • <4>maskClosable: 表示点击蒙层是否允许关闭.可选值：无；默认值： true；类型：boolean
  • <5>mask: 表示是否展示遮罩.可选值：无；默认值： true；类型：boolean
  • <6>maskStyle: 表示遮罩样式.可选值：无；默认值： {}；类型：object
  • <7>style: 表示可用于设置 Drawer 最外层容器的样式，和 drawerStyle 的区别是作用节点包括 mask.可选值：无；默认值： -；类型：object
  • <8>drawerStyle: 表示用于设置 Drawer 弹出层的样式.可选值：无；默认值： -；类型：object
  • <9>headerStyle: 表示用于设置 Drawer 头部的样式.可选值：无；默认值： -；类型：object
  • <10>bodyStyle: 表示可用于设置 Drawer 内容部分的样式.可选值：无；默认值： -；类型：object
  • <11>title: 表示弹出的抽屉的标题.可选值：无；默认值： -；类型：string | ReactNode
  • <12>visible: 表示Drawer 是否可见.可选值：无；默认值： -；类型：boolean
  • <13>width: 表示宽度.可选值：无；默认值： 256；类型：string | number
  • <14>height: 表示高度, 在 placement 为 top 或 bottom 时使用.可选值：无；默认值： 256；类型：string | number
  • <15>className: 表示对话框外层容器的类名.可选值：无；默认值： -；类型：string
  • <16>zIndex: 表示设置 Drawer 的 z-index.可选值：无；默认值： 1000；类型：number
  • <17>placement: 表示弹出的抽屉的位置.可选值：无；默认值： ‘right’；类型：‘top’ | ‘right’ | ‘bottom’ | ‘left’
  • <18>keyboard: 表示是否支持键盘 esc 关闭.可选值：无；默认值： true；类型：boolean

import React, { PureComponent } from 'react';
import { Drawer, Button, Icon, Tooltip } from 'antd';
import moment from 'moment';
function demo {
  const drawerProps = {
    visible,
    width: '50%',
    title: 'drawerTitle',
    maskClosable: false,
    keyboard: false,
    closable: false,
    getContainer: false,
    bodyStyle: {
      paddingBottom: '53px', // 由于自己写了个底部按钮，并且用的是absolute，所以必须加上这个。不然高度看起来就很奇怪
    },
    onClose: () => {
      onClose();
    },
  };
  return (
      <Drawer {...drawerProps}>
      // 下面两个是渲染的 确定和 取消按钮。因为drawer默认是没有这两个按钮的。
        <Row
          type="flex"
          justify="end"
          gutter={20}
          style={
  {
                position: 'absolute',
                right: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
            }}
        >
          <Col><Button onClick={()=>{onClose()}}>取消</Button></Col>
          <Col><Button type='primary' onClick={()=>{saveIntelligentPush()}}>确定</Button></Col>
        </Row>
      </Drawer>
  );
};
export default demo;

3、Modal对话框

模态对话框。就是一个弹出框

何时使用：<1>需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。<2>另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。

• (0)<Modal>组件对应的事件：下面两个都要按钮没有自定义的时候，才可以触发
  • <1>onCancel事件: 表示点击遮罩层或弹出框右上角叉或弹出框的取消按钮的回调.可选值：无；默认值： -；类型： function(e)
  • <2>onOk事件: 表示点击弹出框里面的确定按钮，的回调.可选值：无；默认值： -；类型： function(e)