Shinemo-web-frame NPM

查看详情组件 / 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`
beforeClose	Function	关闭前的回调，如果返回`false`, 则不会执行关闭

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)
})

classnames console-polyfill es3ify-webpack-plugin es5-shim export-from-ie8 normalize.css react react-dom

shinemo-web-comment

0.3.7

3 years ago