1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- <template>
- <div
- v-show="dialogStatus"
- :style="{'background-color': `rgba(0, 0, 0, ${alpha})`, 'z-index': zIndex}"
- class="full-screen-dialog-wrap"
- @click="$emit('close')">
- <div
- :style="{ width: width }"
- class="full-screen-dialog-container"
- @click.stop>
- <slot/>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'FullScreen',
- props: {
- dialogStatus: {
- type: Boolean,
- default: false
- },
- alpha: {
- type: Number,
- default: 0.85
- },
- zIndex: {
- type: Number,
- default: 1000
- },
- width: {
- type: String,
- default: '500px'
- }
- },
- watch: {
- dialogStatus(status) {
- document.body.style.overflow = status ? 'hidden' : ''
- }
- },
- mounted() {
- // 固定body样式
- document.body.style.overflow = this.dialogStatus ? 'hidden' : ''
- },
- destroyed() {
- // 取消固定body样式
- document.body.style.overflow = ''
- }
- }
- </script>
- <style lang="less">
- .full-screen-dialog-wrap {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: auto;
- display: flex;
- padding: 50px;
- .full-screen-dialog-container {
- position: relative;
- margin: auto;
- }
- }
- </style>
|