ant design封装一个弹框组件

简介: ant design封装一个弹框组件

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语

歌谣 歌谣 试着封装一个弹框的组件




编辑


代码部分

``` //取消机构和取消讲师的方法封装 //params visible控制弹框的一个现实和隐藏 //params content文本内容 import React from 'react'; import { Modal, Icon, Button } from 'antd';
class CancelModel extends React.Component { stata = {
}
//控制确定调用的函数
handleOk=() => {
    this.props.handleOk&&this.props.handleOk();
}
 //控制弹窗的一个关闭
 handleCancel=() => {
    this.props.handleCancel&&this.props.handleCancel();
}
//控制页面跳转的参数
handleSkip=() => {
    // this.props.handleSkip&&this.props.handleSkip();
} 
render() {
    const {cancleVisible,content}=this.props
    return (<div>
    <Modal
      title="提示"
      visible={cancleVisible}
      onOk={this.handleOk}
      onCancel={this.handleCancel}
      style={{textAlign:'center'}}
    >
        <Icon type="exclamation-circle" />
        <p>{content||''}</p>
        {/* <Button type="link" block onClick={this.handleSkip}>
        点击跳转
        </Button> */}
    </Modal>
    </div>)
}
}
export default CancelModel ```

引入组件

import CancelModel from '../common/ComponentsList/cancleModel'




<CancelModel content={content} handleOk={this. handleLectureOk} cancleVisible={cancleVisible} handleCancel={this.handleLectureCancle} />




运行结果



image.png

相关文章
|
6月前
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
143 0
|
18天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
15 0
|
5月前
Ant Design组件动态嵌套表单制作
Ant Design组件动态嵌套表单制作
134 0
|
5月前
Ant Design(antd)表单校验的一些注意事项
Ant Design(antd)表单校验的一些注意事项
51 0
|
6月前
Ant design组件库里面的Dropdown怎么写点击事件?
Ant design组件库里面的Dropdown怎么写点击事件?
|
9月前
Ant Design:Modal模态对话框组件封装
Ant Design:Modal模态对话框组件封装
172 0
|
9月前
ant-design:Upload组件上传图片组件封装
ant-design:Upload组件上传图片组件封装
216 0
|
9月前
|
索引
Ant Design:表格自定义渲染
Ant Design:表格自定义渲染
|
9月前
Ant Design:Form表单组件的正确使用
Ant Design:Form表单组件的正确使用
|
11月前
|
前端开发
ant design table实现上下行拖拽功能(类组件)
ant design table实现上下行拖拽功能(类组件)
213 0