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

相关文章
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
494 0
|
7月前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
52 0
|
7月前
|
JavaScript 前端开发
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
573 0
|
7月前
Ant Design组件动态嵌套表单制作
Ant Design组件动态嵌套表单制作
239 0
Ant design组件库里面的Dropdown怎么写点击事件?
Ant design组件库里面的Dropdown怎么写点击事件?
|
前端开发 JavaScript
重置ant design得样式
重置ant design得样式
79 0
|
前端开发
ant design锚点组件
ant design锚点组件
91 0
|
前端开发
ant design子组件渲染不能及时渲染
ant design子组件渲染不能及时渲染
85 0
|
索引
Ant Design:表格自定义渲染
Ant Design:表格自定义渲染
220 0
Ant Design:Modal模态对话框组件封装
Ant Design:Modal模态对话框组件封装
271 0