vue2+vue3实现局部全屏

写项目的时候发现一个某一部分全屏的需求 ，但是只找到了vue2的，所以2和3的代码都附上

效果

vue3代码

<template>
    <button @click="isScreenFull">点击全屏</button>
    <div ref="box" class="back" >
        需要全屏的组件
    </div>
</template>

<script setup>
    import { ref } from "vue";
    import screenfull from "screenfull";

     const box = ref(null);

        // 全屏方法
        function isScreenFull() {
            console.log(111);
            if (!screenfull.isEnabled) {
                // 如果不支持进入全屏，发出不支持提示
                this.$message({
                    message: "您的浏览器版本过低不支持全屏显示！",
                    type: "warning",
                });
                return false;
            }
            screenfull.toggle(box.value);
  document.addEventListener(screenfull.raw.fullscreenchange, function () {
                if (screenfull.isFullscreen) {
                    // 进入全屏模式
                    state.height = window.innerHeight
                    console.log('全屏模式高度', window.innerHeight);
                } else {
                    // 退出全屏模式
                    state.height = 600
                }
            });

        }

</script>

<style scoped>
    .back {
        background: pink;
        width: 200px;
        height: 200px;
    }
</style>

vue2和vue3的不同只是js部分有一点不相同

vue2js部分代码

    //引入全屏插件
    import screenfull from "screenfull";
    export default {
        data() {
            return {};
        },
        created() {
            this.$nextTick(() => {
                this.isScreenFull()
            });
        },
        methods: {
            //全屏方法11
            isScreenFull() {
                console.log(111);
                if (!screenfull.isEnabled) {
                    // 如果不支持进入全屏，发出不支持提示
                    this.$message({
                        message: "您的浏览器版本过低不支持全屏显示！",
                        type: "warning",
                    });
                    return false;
                }
                screenfull.toggle(this.$refs.box);
            },
        },
    };