72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
|
<template>
|
|||
|
|
<div title="$'layouts.Exit full screen'" @mouseover.stop="onMouseover" @mouseout.stop="onMouseout">
|
|||
|
|
<div @click.stop="onCloseFullScreen" class="close-full-screen" :style="{ top: state.closeBoxTop + 'px' }">
|
|||
|
|
<Icon name="el-icon-Close" />
|
|||
|
|
</div>
|
|||
|
|
<div class="close-full-screen-on"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { reactive, onMounted } from 'vue'
|
|||
|
|
import { useNavTabs } from '@/stores/navTabs'
|
|||
|
|
|
|||
|
|
const navTabs = useNavTabs()
|
|||
|
|
|
|||
|
|
const state = reactive({
|
|||
|
|
closeBoxTop: 20,
|
|||
|
|
})
|
|||
|
|
onMounted(() => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
state.closeBoxTop = -30
|
|||
|
|
}, 300)
|
|||
|
|
})
|
|||
|
|
/*
|
|||
|
|
* 鼠标滑到顶部显示关闭全屏按钮
|
|||
|
|
* 要检查 hover 的元素在外部，直接使用事件而不是css
|
|||
|
|
*/
|
|||
|
|
const onMouseover = () => {
|
|||
|
|
state.closeBoxTop = 20
|
|||
|
|
}
|
|||
|
|
const onMouseout = () => {
|
|||
|
|
state.closeBoxTop = -30
|
|||
|
|
}
|
|||
|
|
const onCloseFullScreen = () => {
|
|||
|
|
navTabs.setFullScreen(false)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.close-full-screen {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: fixed;
|
|||
|
|
right: calc(50% - 20px);
|
|||
|
|
z-index: 9999999;
|
|||
|
|
height: 40px;
|
|||
|
|
width: 40px;
|
|||
|
|
background-color: rgba($color: #000000, $alpha: 0.1);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-shadow: var(--el-box-shadow-light);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
.icon {
|
|||
|
|
color: rgba($color: #000000, $alpha: 0.6) !important;
|
|||
|
|
}
|
|||
|
|
&:hover {
|
|||
|
|
background-color: rgba($color: #000000, $alpha: 0.3);
|
|||
|
|
.icon {
|
|||
|
|
color: rgba($color: #ffffff, $alpha: 0.6) !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.close-full-screen-on {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 9999998;
|
|||
|
|
height: 60px;
|
|||
|
|
width: 100px;
|
|||
|
|
left: calc(50% - 50px);
|
|||
|
|
}
|
|||
|
|
</style>
|