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