<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 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>
|
