查看详情组件 / WebFrame

使用

| 参数 | 类型 | 备注 | | :-------- | --------:| :------: | | cls | String | 自定义容器样式 | | titleCls | String | 自定义顶部区域样式, 在这个class中设置高度将不会生效，请使用下面的titleHeight设置高度 | | titleHeight | Number | 设置顶部区域高度 | | url | String | 要展示的url | | visible | Bool | 是否显示 | | title | String|Boolean | 顶部标题，设置为false不显示title | | 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)
})