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

相关文章
|
计算机视觉 Python
OpenCV完成面部情绪识别
OpenCV完成面部情绪识别
388 0
|
算法
秒懂算法 | 最大网络流的增广路算法
增广路算法是由Ford和Fulkerson于1957年提出的。该算法寻求网络中最大流的基本思想是寻找可增广路,使网络的流量得到增加,直到最大为止。即首先给出一个初始可行流,这样的可行流是存在的,例如零流。如果存在关于它的可增广路,那么调整该路上每条弧上的流量,就可以得到新的可行流。对于新的可行流,如果仍存在可增广路,则用同样的方法使流的值增大。继续这个过程,直到网络中不存在关于新的可行流的可增广路为止。此时,网络中的可行流就是所求的最大流。
2172 0
秒懂算法 | 最大网络流的增广路算法
|
11月前
|
开发框架 前端开发 Go
eino — 基于go语言的大模型应用开发框架(二)
本文介绍了如何使用Eino框架实现一个基本的LLM(大语言模型)应用。Eino中的`ChatModel`接口提供了与不同大模型服务(如OpenAI、Ollama等)交互的统一方式,支持生成完整响应、流式响应和绑定工具等功能。`Generate`方法用于生成完整的模型响应,`Stream`方法以流式方式返回结果,`BindTools`方法为模型绑定工具。此外,还介绍了通过`Option`模式配置模型参数及模板功能,支持基于前端和用户自定义的角色及Prompt。目前主要聚焦于`ChatModel`的`Generate`方法,后续将继续深入学习。
1502 7
|
存储 人工智能 API
AgentScope:阿里开源多智能体低代码开发平台,支持一键导出源码、多种模型API和本地模型部署
AgentScope是阿里巴巴集团开源的多智能体开发平台,旨在帮助开发者轻松构建和部署多智能体应用。该平台提供分布式支持,内置多种模型API和本地模型部署选项,支持多模态数据处理。
8011 77
AgentScope:阿里开源多智能体低代码开发平台,支持一键导出源码、多种模型API和本地模型部署
|
11月前
|
存储 开发框架 Devops
eino — 基于go语言的大模型应用开发框架(一)
Eino 是一个受开源社区优秀LLM应用开发框架(如LangChain和LlamaIndex)启发的Go语言框架,强调简洁性、可扩展性和可靠性。它提供了易于复用的组件、强大的编排框架、简洁明了的API、最佳实践集合及实用的DevOps工具,支持快速构建和部署LLM应用。Eino不仅兼容多种模型库(如OpenAI、Ollama、Ark),还提供详细的官方文档和活跃的社区支持,便于开发者上手使用。
2454 8
|
Java 关系型数据库 MySQL
基于SpringBoot+Vue共享汽车管理系统(源码+部署说明+演示视频+源码介绍)(1)
基于SpringBoot+Vue共享汽车管理系统(源码+部署说明+演示视频+源码介绍)
189 1
|
SQL Java 数据处理
SQL游标的详细使用方法与实例
SQL游标的详细使用方法与实例
|
SQL 存储 druid
SpringBoot多数据源事务解决方案
之前有文章提供了springboot多数据源动态注册切换的整合方案,在后续使用过程中,发现在事务控制中有多种bug发生,决定对此问题进行分析与解决
870 0
|
搜索推荐
排序算法:快速排序(三种排序方式、递归和非递归)
排序算法:快速排序(三种排序方式、递归和非递归)
3950 0