yonbip-code-gen-mcp
Version:
YonBIP高级版代码生成MCP
199 lines (144 loc) • 6.71 kB
Markdown
# 前端弹窗（使用高阶组件）开发步骤
1 定义弹窗 视图模型 (this.state.appmodel)
2 渲染视图 renderModel()
3 调用高阶组件，显示弹窗(this.props.modal.show("自己定义一个弹窗ID，后续 showModal时传入此ID即可"))
4 beSureBtnClick() 中
操作视图模型(this.state.appmodel) =》 更新视图(this.setState(this.state))
# 前端弹窗（使用高阶组件）Demo示例js
```js
/**
* 弹窗示例
*/
class ApplicationPage extends Component {
constructor(props) {
super(props);
/**
* 创建state 模型
*/
this.state = this.createState();
/**
* 适配版本变化,2105及其以后版本必须的调用, 之前版本不需要
*/
this.props.use.form('你的表单ID，需要在模板上注册好，并且2111后需要使用use.form注册');
}
createState = () => {
let state = {
isPageReady:false, //页面是否可以进行渲染
appmodal: {
title: '新增节点',// 弹框表头信息
beSureBtnClick: this.beSureBtnClick, //点击确定按钮事件
cancelBtnClick: this.cancelBtnClick, //取消按钮事件回调
userControl:true, // 点 确定/取消 按钮后，是否自动关闭弹框.true:手动关。false:自动关,默认false
size:'lg', // 模态框大小 sm/lg/xlg/xxlg/max 【className为junior/senior/combine和size不要同时配置】
noFooter : false, //是否需要底部按钮,默认有footer,有false,没有true
rightBtnName : '取消', //左侧按钮名称,默认‘取消’
leftBtnName : '确定', //右侧按钮名称， 默认‘确定’
className:'junior', /*
简单型junior -> 宽度410PX 高度200PX .【这个暂时别用，简单提示使用promptBox 或者 this.props.ncmodal的createModal】
中型senior -> 宽度520PX 高度根据内容自适应，最小值268，最大高度限制420，如modal主体还要承modal主体区出现滚动条
复杂型combine -> 宽度680PX 高度根据内容自适应，最小值268，最大高度限制570，如modal主体还要承载modal主体区出现滚动条
头部和底部固定高度
不写的话默认走size设定大小
*/
hasBackDrop:true,//显示遮罩层，显示是true，不显示是false，默认是true
zIndex:200,//遮罩的层级为zIndex，弹框默认为zIndex+1。默认为200，非比传项
showCustomBtns:false,//允许自定义footer里的按钮,默认false显示 确定 和 取消 按钮，true是传入自定义的按钮
customBtns:<div>自定义的一些按钮</div>, //JSX结构，样式需要自己写
validateCloseBtn:false,//点击关闭按钮的校验,默认是false不校验，校验是true【不校验点击X关闭，校验执行传入的closeModalEve回调】，配置为true的时候esc不关闭
hideRightBtn,//隐藏足部右边的按钮，默认是false不隐藏，隐藏是true
hideLeftBtn,//隐藏足部左边的按钮，默认是false不隐藏，隐藏是true
keyboard,//esc关闭modal，默认true
bodyHeight,//modalbody的高度，用于定制modal的高度，如果用了此高度，size和classname的配置都会无法使用
}
}
return state; //返回state解构
}
beSureBtnClick = () => {
//todo
}
/**
* 按钮弹窗按钮 调用此函数
*/
onShowModal = () => {
this.props.modal.show("自己定义一个弹窗ID，后续 showModal时传入此ID即可")
}
/**
* 获取数据 => 填充数据 => demo
*/
onDemo = () => {
//获取界面数据
getData(callback = (data) => {
//填充model数据
this.fillData({data:data, callback: (data) => {
//todo
}})
})
}
/**
* 获取数据 示例，具体看界面情况
* @param {*} callback
*/
getData = (callback = () => {}) => {
//调用获取数据的API或者接口等等
//todo fetchdata
//拿到数据后
callback && callback(fetchdata);
}
/**
* 将获取到的数据填充到模态框中
* @param {} params
*/
fillData = (params) => {
let {data,callback} = params;
//调用高阶组件或者，填充数据的APi，或者更新你的视图模型
//todo...
//看具体情况处理回调函数
//setTimeout(callback,0);
//callback && callback();
}
cancelBtnClick = () => {
//todo....
}
render() {
var { isPageReady } = this.state;
if (!isPageReady) return ''; //页面资源加载完成后才能渲染页面
/**
* 此处如果是要渲染模板上的内容，需要等待模板加载完成后才可以继续渲染，比如上方的 isPageReady
* @returns
*/
let renderModel = () => {
const {modal } = this.props;
let { createModal } = modal;
let { appmodal } = this.state;
/**
* @returns 需要渲染的弹窗内容
*/
let renderContent = () => {
// 获取创建表单API
let { createForm } = this.props.form;
return (
<div>
{
createForm('你的表单ID，需要在模板上注册好，并且2111后需要使用use.form注册',{
})
}
</div>
)
}
return(
<div>
{
createModal('自己定义一个弹窗ID，后续 showModal时传入此ID即可',{
...appmodal,
content: renderContent()
})
}
</div>
)
}
return <div>
{renderModel() /** 渲染弹窗**/}
</div>
}
}
```