From 3b9b33c2b5ab555696e1012ed1e35446c8052786 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 14 八月 2023 14:13:09 +0800
Subject: [PATCH] 更新大屏
---
src/views/bigScreen/index.vue | 35 +++++++++++++++++++++++------------
1 files changed, 23 insertions(+), 12 deletions(-)
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index f7775c5..375be53 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -1,39 +1,50 @@
<template>
- <div class="system-role-container">
- 6666666
+ <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 TableData {
-
-}
interface TableDataState {
-
+ isScreenfull: boolean
}
export default defineComponent({
name: 'bigScreen',
- components: { },
+ components: { screen },
setup() {
- const roleDialogRef = ref();
const state = reactive<TableDataState>({
-
+ isScreenfull: false,
});
// 页面加载时
onMounted(() => {
});
- return {
- ...toRefs(state)
+
+ 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>
\ No newline at end of file
--
Gitblit v1.9.2