docs_vue2/one/docs/demo/overlay/position.vue

64 lines
998 B
Vue
Raw Normal View History

2020-08-13 11:47:56 +08:00
<template>
<article>
<veui-button
ref="toggle"
@click="open = !open"
>
Toggle
</veui-button>
<veui-overlay
:open.sync="open"
overlay-class="centered-overlay"
>
<div v-outside:toggle="hide">
Centered
</div>
</veui-overlay>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
directives: { outside },
data () {
return {
open: false
}
},
methods: {
hide () {
this.open = false
}
}
}
</script>
2021-09-15 20:03:51 +08:00
<style lang="less" scoped>
2020-08-13 11:47:56 +08:00
.centered-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
}
.centered-overlay {
line-height: 100px;
text-align: center;
2021-09-15 20:03:51 +08:00
border: 1px solid #dbdbdb;
2020-08-13 11:47:56 +08:00
background-color: #fff;
}
</style>
<docs>
使用常见的 CSS 定位方法可以自定义
</docs>