Prompt
Prompt组件
- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义
visible、onClose函数。 - 可通过title设置弹出框标题，content设置内容，buttons设置尾部按钮。(相对Dialog新增参数)
- 按钮默认有[取消, 确定]2个按钮，点击[取消]默认的执行函数是直接关闭，点击[确定]通过传入的onConfirm函数可获取input的value数组，可自行添加回调。。
- 通过visible设置弹框是否显示, 可选true/false, 必需。
- 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。
- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。
- 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。
主要属性和接口：
- title:弹框的标题，必需。
- content:弹框的内容，必需。
- buttons:尾部按钮的内容，必需是数组的形式，text标识填充的问题，phStyle表示主题，onHandle表示点击按钮的回调，otherProps传递按钮的其他属性，如{active:true, block:true, hollow: true}。
- onConfirm:点击确定按钮的回调，返回input的value。
- visible:弹框是否显示标识, 默认false不可见。
- onClose:关闭弹框的功能函数。
- closeButton:右上角关闭按钮是否显示的标识, 默认不显示。
- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭。
示例:
const buttons = [
{text: "取消", phStyle: "gray", otherProps: {hollow: true}}, // text默认"确定", phStyle默认primary，onHandle默认onClose
{text: "确定", onHandle: this.onConfirm}
];
...
<Prompt closeButton shadowDisabled visible={this.state.visible} onClose={::this.onClose.bind(this,'visible')}
title="这是标题" content="这里是弹出框的内容..." buttons={buttons} />Constructor
Prompt
Prompt
()
Example:
import React, { Component } from "react";
import {Prompt, Button} from "phoenix-ui";
import Code from "./code/code";
export default class prompt extends Component{
constructor(props,context){
super(props,context);
this.state = {
visible1: false,
visible2: false,
visible3: false,
visible4: false,
inputName: "",
inputPassword: ""
}
}
onClose(key){
let o = {};
o[key] = false;
this.setState(o);
}
onConfirm(valueArr){ // 返回input值的数组
console.log(valueArr);
this.onClose('visible2');
}
onUserNameChange(userName){
console.log(userName);
}
onPasswordChange(password){
console.log(password);
}
render(){
const buttons = [
// text默认"确定", phStyle默认primary，onHandle默认onClose, otherProps传按钮的属性
{text: "取消", phStyle: "gray", otherProps: {hollow: true}, onHandle: this.onConfirm.bind(this)},
{text: "提交", onHandle: this.onConfirm.bind(this)}
];
const inputs = [
// type默认text，其他属性可选，按照正常输入;
{defaultValue: "hah", placeholder: "用户名", maxLength: 10, onChange: this.onUserNameChange.bind(this)},
{type: "password", placeholder: "密码", onChange: this.onPasswordChange.bind(this)}
];
return(
<div>
<h2 className="comp-title">Prompt</h2>
<h3 className="comp-type">title 定义标题; content 定义内容</h3>
<div className="content">
<h3 className="comp-tip">默认有[取消, 确定]2个按钮，点击[取消]默认的执行函数是直接关闭，点击[确定]通过传入的onConfirm函数可获取input的value数组，可自行添加回调。</h3>
<Button radius phSize="lg" onClick={()=>{this.setState({visible1:true})}}>Prompt默认状态</Button>
</div>
<Prompt visible={this.state.visible1} onClose={::this.onClose.bind(this,"visible1")} title="这是标题" content="这里是弹出框的内容..."
onConfirm={(inputValue)=>{ console.log(inputValue); this.onClose("visible1"); }} />
<Code target="prompt" />
<h3 className="comp-type">buttons 定义尾部按钮</h3>
<div className="content">
<Button radius phSize="lg" onClick={()=>{this.setState({visible2:true})}}>自定义按钮buttons</Button>
</div>
<Prompt visible={this.state.visible2} onClose={::this.onClose.bind(this,"visible2")} title="这是标题" content="这里是弹出框的内容..." buttons={buttons} />
<Code target="prompt-buttons" />
<h3 className="comp-type">inputs 定义内容区域文本框</h3>
<div className="content">
<Button radius phSize="lg" onClick={()=>{this.setState({visible3:true})}}>自定义inputs</Button>
</div>
<Prompt visible={this.state.visible3} onClose={::this.onClose.bind(this,"visible3")} title="这是标题" content="这里是弹出框的内容..." inputs={inputs}
onConfirm={(inputValue)=>{ console.log(inputValue); this.onClose("visible3"); }} />
<Code target="prompt-inputs" />
<h3 className="comp-type">其他属性(visible、onClose、closeButton、shadowDisabled)参照<a href="#/dialog">Dialog</a>组件</h3>
<div className="content">
<Button radius phSize="lg" onClick={()=>{this.setState({visible4:true})}}>完整案例</Button>
</div>
<Prompt visible={this.state.visible4} onClose={::this.onClose.bind(this,"visible4")} closeButton shadowDisabled
title="这是标题" content="这里是弹出框的内容..." onConfirm={(inputValue)=>{ console.log(inputValue); this.onClose("visible4"); }} />
<Code target="prompt-whole" />
</div>
);
}
}方法
onClose
onClose
()
关闭弹框的执行函数
onConfirm
onConfirm
()
点击确定的回调函数
属性
closeButton
Boolean
右上角按钮是否可见, 默认不可见
shadowDisabled
Boolean
阴影部分是否点击可关闭弹框, 默认传了onClose之后可关闭
title
String
标题
title
String
内容
visible
Boolean
是否可见标识