87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
import Drawer from '../src/index'
|
|
import Button from '../../button/index'
|
|
import '../assets/index.less'
|
|
import '../../menu/style/index'
|
|
import '../../icon/style/index'
|
|
import '../../button/style/index'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
open: false,
|
|
openChild: false,
|
|
openChildren: false,
|
|
}
|
|
},
|
|
methods: {
|
|
onClick () {
|
|
this.open = !this.open
|
|
},
|
|
onChildClick () {
|
|
this.openChild = !this.openChild
|
|
},
|
|
onChildrenClick () {
|
|
this.openChildren = !this.openChildren
|
|
},
|
|
getLevelMove (e) {
|
|
const target = e.target
|
|
if (target.className === 'drawer1') {
|
|
return [200, 100]
|
|
}
|
|
return 100
|
|
},
|
|
},
|
|
render () {
|
|
return (
|
|
<div >
|
|
<div
|
|
style={{
|
|
width: '100%', height: 667, background: '#fff000',
|
|
color: '#fff', textAlign: 'center', lineHeight: '667px',
|
|
}}
|
|
>
|
|
<Button onClick={this.onClick}>打开抽屉</Button>
|
|
</div>
|
|
<Drawer
|
|
width='20vw'
|
|
handler={false}
|
|
open={this.open}
|
|
onMaskClick={this.onClick}
|
|
wrapperClassName='drawer1'
|
|
placement='right'
|
|
>
|
|
<div>
|
|
<Button onClick={this.onChildClick}>打开子级</Button>
|
|
<Drawer
|
|
handler={false}
|
|
open={this.openChild}
|
|
onMaskClick={this.onChildClick}
|
|
wrapperClassName='drawer2'
|
|
level='.drawer1'
|
|
placement='right'
|
|
levelMove={100}
|
|
>
|
|
<div style={{ width: 200 }}>
|
|
二级抽屉
|
|
<Button onClick={this.onChildrenClick}>打开子级</Button>
|
|
<Drawer
|
|
handler={false}
|
|
open={this.openChildren}
|
|
onMaskClick={this.onChildrenClick}
|
|
level={['.drawer1', '.drawer2']}
|
|
placement='right'
|
|
levelMove={this.getLevelMove}
|
|
>
|
|
<div style={{ width: 200 }}>
|
|
三级抽屉
|
|
</div>
|
|
</Drawer>
|
|
</div>
|
|
</Drawer>
|
|
</div>
|
|
</Drawer>
|
|
</div>
|
|
)
|
|
},
|
|
}
|