<template>
|
<div class="screen-container">
|
<screen :isFull="isScreenfull" @clickFull="clickFullscreen"></screen>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
import screen from './components/screen.vue'
|
import screenfull from 'screenfull'
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
// 定义接口来定义对象的类型
|
interface TableDataState {
|
isScreenfull: boolean
|
}
|
|
export default defineComponent({
|
name: 'bigScreen',
|
components: { screen },
|
setup() {
|
const state = reactive<TableDataState>({
|
isScreenfull: false,
|
});
|
|
// 页面加载时
|
onMounted(() => {
|
const baseSize = 38;
|
/* 设置 rem 函数 */
|
function setRem() {
|
const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
|
console.log('切换尺寸>>',document.documentElement.style.fontSize)
|
}
|
setRem();/* 初始化 rem */
|
|
window.onresize = () => {
|
setRem();/* 改变窗口大小时重新设置 rem */
|
console.log('执行切换')
|
}
|
});
|
|
const clickFullscreen =() => {
|
if(!screenfull.isEnabled){
|
ElMessage.error('浏览器不支持')
|
return false
|
}
|
screenfull.toggle();
|
}
|
|
return {
|
clickFullscreen,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
<style lang="scss" scoped>
|
.screen-container{
|
height: calc(100vh - 144px);
|
}
|
</style>
|
