81 lines
1.3 KiB
Vue
81 lines
1.3 KiB
Vue
<template>
|
|
<article>
|
|
<veui-button
|
|
ref="parent"
|
|
@click="parentOpen = !parentOpen"
|
|
>
|
|
Toggle
|
|
</veui-button>
|
|
<veui-overlay
|
|
target="parent"
|
|
position="top-start"
|
|
:open.sync="parentOpen"
|
|
overlay-class="relative-overlay"
|
|
>
|
|
<veui-button
|
|
ref="child"
|
|
@click="childOpen = !childOpen"
|
|
>
|
|
Toggle
|
|
</veui-button>
|
|
<veui-overlay
|
|
target="child"
|
|
position="top-start"
|
|
:open.sync="childOpen"
|
|
overlay-class="relative-overlay"
|
|
>
|
|
Child Overlay
|
|
</veui-overlay>
|
|
</veui-overlay>
|
|
<veui-button
|
|
ui="xs"
|
|
@click="parentOpen = childOpen = false"
|
|
>
|
|
Hide all
|
|
</veui-button>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import { Overlay, Button } from 'veui'
|
|
|
|
export default {
|
|
components: {
|
|
'veui-overlay': Overlay,
|
|
'veui-button': Button
|
|
},
|
|
data () {
|
|
return {
|
|
parentOpen: false,
|
|
childOpen: false
|
|
}
|
|
},
|
|
watch: {
|
|
parentOpen (val) {
|
|
if (!val) {
|
|
this.childOpen = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.veui-overlay {
|
|
display: none;
|
|
}
|
|
|
|
.relative-overlay {
|
|
width: 200px;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
border: 1px solid #dbdbdb;
|
|
background-color: #fff;
|
|
|
|
.veui-button {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|