Popup

弹层组件

  • 由于弹层的显示操作在组件以外, 所以需要在使用时自定义visible、onShow、closeCallback函数。
  • 通过align设置碳层弹出的位置, 可选top/bottom。
  • 可通过closeCallback配置点击弹层阴影部分来关闭弹层。

主要属性和接口：

  • visible:弹层是否显示标识, 默认false不可见
  • closeCallback:关闭弹层的功能函数
  • align:弹层的位置, 默认top

示例:

    <Popup align='top' visible={this.state.visible} closeCallback={::this.closeCallback}>
        <ul className='ph-popup-list'>
            <li className='ph-popup-item'>未上线单店</li>
            <li className='ph-popup-item'>未上线连锁店</li>
        </ul>
    </Popup>
    onShow(){
        this.setState({
            visible: true
        });
    }
    closeCallback(){
        this.setState({
            visible: false
        });
    }
Extends Component
Defined in: src/popup/index.js:11
Module: 操作类组件

Available since 0.4.0

Constructor

Popup

Popup ()

Defined in src/popup/index.js:11

Available since 0.4.0

Example:

import React, { Component } from 'react'

import Button from 'phoenix-ui/lib/button'
import Popup from 'phoenix-ui/lib/popup'
import List from 'phoenix-ui/lib/list'
import Code from "./code/code"

export default class popup extends Component{

    constructor(props,context){
        super(props,context); 

        this.state = {
            topVisible: false,
            bottomVisible: false
        }
    }

    onShowTopPopup(){
        this.setState({
          topVisible: true
        });
    }

    hideTopPopup(){
        this.setState({
          topVisible: false
        });
    }

    onShowBottomPopup(){
        this.setState({
          bottomVisible: true
        });
    }

    hideBottomPopup(){
        this.setState({
          bottomVisible: false
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Popup</h2>
                <h3 className="comp-type">visible(默认false) 弹层是否可见，必需<br/>closeCallback 关闭弹层的执行函数<br/>align(默认top) 弹层弹出位置</h3>
                <div className="content">
                    <Button phSize="lg" onClick={this.onShowTopPopup.bind(this)}>Top</Button>
                </div>
                <Popup visible={this.state.topVisible} closeCallback={this.hideTopPopup.bind(this)}>
                    <List>
                        <List.Item className="clickable" active>
                            <List.Col>未上线单店</List.Col>
                        </List.Item>
                        <List.Item className="clickable">
                            <List.Col>未上线连锁店</List.Col>
                        </List.Item>
                        <List.Item className="clickable">
                            <List.Col>在线单店</List.Col>
                        </List.Item>
                        <List.Item className="clickable">
                            <List.Col>在线连锁店</List.Col>
                        </List.Item>
                    </List>
                </Popup>
                <Code target="popup-top" />

                <div className="content">
                    <Button phSize="lg" onClick={this.onShowBottomPopup.bind(this)}>Bottom</Button>
                </div>
                <Popup align="bottom" visible={this.state.bottomVisible} closeCallback={this.hideBottomPopup.bind(this)}>
                    <div className="ph-action-sheet">
                        <ul>
                            <li className="ph-popup-item ph-popup-tip">确认 删除此作品？</li>
                            <li className="ph-popup-item ph-popup-delete" onClick={this.hideBottomPopup.bind(this)}>删除作品</li>
                        </ul>
                        <div className="ph-popup-operate" onClick={this.hideBottomPopup.bind(this)}>取消</div>
                    </div>
                </Popup>
                <Code target="popup-bottom" />
            </div>
        );
    }
}

方法

closeCallback

closeCallback ()

Defined in src/popup/index.js:81

关闭的执行函数

属性

align

String

Defined in src/popup/index.js:75

弹层的位置,默认top

classPrefix

String

Defined in src/popup/index.js:56

样式前缀

Default:

'popup'

componentTag

String

Defined in src/popup/index.js:63

标签tagName

visible

Boolean

Defined in src/popup/index.js:69

是否可见标识