更新大屏

马宇豪

2023-08-14 3b9b33c2b5ab555696e1012ed1e35446c8052786

 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>