1.0.0 • Published 5 years ago
@xme-react/web-frame v1.0.0
查看详情组件 / 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)
})
1.0.0
5 years ago