@xme-react/web-frame

查看详情组件 / WebFrame

使用

参数	类型	备注
cls	String	自定义容器样式
titleCls	String	自定义顶部区域样式, 在这个class中设置高度将不会生效，请使用下面的titleHeight设置高度
titleHeight	Number	设置顶部区域高度
url	String	要展示的url
visible	Bool	是否显示
title	String	Boolean
width	String	展示容器的宽度，默认300px
onClose	Function	点击关闭的回调
closable	Bool	容器是否可关闭，容器没有关闭按钮，默认true
autoClose	Bool	点击容器外的地方是否关闭容器，如果closable不为true，此参数无效
direction	String	webFrame的位置，默认right, 可选top,right,bottom,left

import React from 'react'
import ReactDOM from 'react-dom'
import WebFrame from '@xm/WebFrame'

class App extends React.Component {
  constructor (props) {
    super(props)

    this.index = 0
    this.directions = ['top', 'right', 'bottom', 'left']

    this.state = {
      visible: false,
      index: -1,
      renderWebFrame: true,
      direction: this.directions[this.index],
      urls: [
        {
          title: '百度',
          url: 'http://m.baidu.com'
        },
        {
          title: '天猫',
          url: 'http://m.tmall.com'
        },
        {
          title: '淘宝',
          url: 'http://m.taobao.com'
        }]
    }

    this.hide = this.hide.bind(this)
    this.show = this.show.bind(this)
    this.change = this.change.bind(this)
    this.unmount = this.unmount.bind(this)
    this.switchDirection = this.switchDirection.bind(this)
  }

  change () {
    const {urls} = this.state
    let {index} = this.state
    const len = urls.length

    index = index + 1 >= len ? 0 : index + 1

    this.setState({
      visible: true,
      index
    })
  }

  show () {
    this.setState({
      visible: true,
      renderWebFrame: true
    })
  }

  hide () {
    this.setState({
      visible: false
    })
  }

  unmount () {
    this.setState({
      renderWebFrame: false
    })
  }

  switchDirection () {
    if (this.index + 1 === this.directions.length) {
      this.index = 0
    } else {
      this.index += 1
    }

    this.setState({
      direction: this.directions[this.index]
    })
  }

  render () {
    const {visible, urls, index, renderWebFrame, direction} = this.state
    const width = (this.index === 1 || this.index === 3) ? '400px' : '100%'
    const height = (this.index === 1 || this.index === 3) ? '100%' : '400px'

    return (
      <div>
        <button onClick={this.change}>切换</button>
        <button onClick={this.show}>显示</button>
        <button onClick={this.hide}>隐藏</button>
        <button onClick={this.unmount}>销毁</button>
        <button onClick={this.switchDirection}>修改出现的方向</button>
        {
          renderWebFrame ?
            <WebFrame visible={visible} autoClose closable direction={direction}
                      url={urls[index] && urls[index].url} width={width} height={height}
                      title={false} onClose={this.hide} />
            : null
        }

      </div>
    )
  }
}

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(<App />, document.body)
})