Alert
Alert组件
- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义
visible、closeCallback函数。 - 可通过title设置弹出框标题，content设置内容，buttons设置尾部按钮。(相对Dialog新增参数)
- 默认有[确定]1个按钮，点击[确定]默认的执行函数是closeCallback直接关闭。
- 通过visible设置弹框是否显示, 可选true/false, 必需。
- 可通过closeCallback配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。
- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。
- 默认传了closeCallback之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。
主要属性和接口：
- title:弹框的标题，必需。
- content:弹框的内容，必需。
- buttons:尾部按钮的内容，必需是数组的形式，text标识填充的问题，phStyle表示主题，onHandle表示点击的回调，otherProps传递按钮的其他属性，如{active:true, block:true, hollow: true}。
- visible:弹框是否显示标识, 默认false不可见。
- closeCallback:关闭弹框的功能函数。
- closeButton:右上角关闭按钮是否显示的标识, 默认不显示。
- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了closeCallback函数就可以关闭。
示例:
const buttons = [
{text: '取消', phStyle: 'gray', otherProps: {hollow: true}}, // text默认'确定', phStyle默认primary，onHandle默认执行closeCallback
{text: '确定', onHandle: this.confirmCallback}
];
...
<Alert closeButton shadowDisabled visible={this.state.visible} closeCallback={this.closeCallback.bind(this,'visible')}
title='这是标题' content='这里是弹出框的内容...' buttons={buttons} />Constructor
Alert
Alert
()
Example:
import React, { Component } from "react"
import Alert from "phoenix-ui/lib/modal/Alert"
import Button from "phoenix-ui/lib/button"
import Code from "./code/code";
export default class alert extends Component{
constructor(props,context){
super(props,context);
this.state = {
visible1: false,
visible2: false,
visible3: false,
visible4: false
}
}
closeCallback(key){
let o = {};
o[key] = false;
this.setState(o);
}
confirmCallback(key){
this.closeCallback(key);
}
render(){
const buttons1 = [
// text默认"确定", phStyle默认primary，onHandle默认closeCallback, otherProps传按钮的属性
{text: "取消", phStyle: "gray", otherProps: {hollow: true}},
{onHandle: this.confirmCallback.bind(this,"visible2")}
],
buttons2 = [
{text: "按钮一", otherProps: {hollow: true}},
{text: "按钮二", otherProps: {hollow: true}},
{text: "按钮三", otherProps: {hollow: true}}
],
buttons3 = [
{text: "取消", phStyle: "gray", otherProps: {hollow: true}},
{onHandle: this.confirmCallback.bind(this,"visible4")}
]
const content = <p>这里是弹出框的内容...</p>;
return(
<div>
<h2 className="comp-title">Alert</h2>
<h3 className="comp-type">title 定义标题; content 定义内容</h3>
<div className="content">
<Button radius phSize="lg" onClick={()=>{this.setState({visible1:true})}}>alert默认状态</Button>
</div>
<Alert visible={this.state.visible1} closeCallback={this.closeCallback.bind(this,"visible1")} title="这是标题" content={content} />
<Code target="alert" />
<h3 className="comp-type">buttons 定义尾部按钮</h3>
<div className="content">
<h3 className="comp-tip">2个按钮</h3>
<Button radius phSize="lg" onClick={()=>{this.setState({visible2:true})}}>自定义按钮buttons</Button>
<h3 className="comp-tip">多个按钮</h3>
<Button radius phSize="lg" onClick={()=>{this.setState({visible3:true})}}>自定义按钮buttons</Button>
</div>
<Alert visible={this.state.visible2} closeCallback={this.closeCallback.bind(this,"visible2")} title="这是标题" content="这里是弹出框的内容..." buttons={buttons1} />
<Alert visible={this.state.visible3} closeCallback={this.closeCallback.bind(this,"visible3")} title="这是标题" content="这里是弹出框的内容..." buttons={buttons2} />
<Code target="alert-buttons" />
<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>
<Alert visible={this.state.visible4} closeCallback={this.closeCallback.bind(this,"visible4")} closeButton shadowDisabled
title="这是标题" content="这里是弹出框的内容..." buttons={buttons3} />
<Code target="alert-whole" />
</div>
);
}
}方法
closeCallback
closeCallback
()
关闭弹框的执行函数
属性
closeButton
Boolean
右上角按钮是否可见, 默认不可见
content
String | Element
内容
shadowDisabled
Boolean
阴影部分是否点击可关闭弹框, 默认传了closeCallback之后可关闭
title
String | Element
标题
visible
Boolean
是否可见标识