vue全屏部分元素

直接上代碼：

<template>
    <Card id="cardHeight">
        <div style="width:100%;height:100%" id="fullscreen" class="layer">
            <div ref="tipBtnGroup" style="position: absolute;right:33px;top:16px;width:10px;z-index: 1">
                <Button-group vertical >
                    <i-button icon="arrow-expand" @click="handleFullScreen"></i-button>
                    <i-button icon="chevron-left" @click="showTip"></i-button>
                </Button-group>
            </div>
        </div>
    </Card>
</template>

    export default {
        data() {
            return {
                fullscreen:false,
            }
        },

        methods: {
            // 全屏事件
            handleFullScreen(){
                let element = document.getElementById("fullscreen");
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            },
            showTip() {
                if (this.tip) {
                    this.tip = false;
                    this.$refs.tipBtnGroup.style="position: absolute;right:33px;top:16px;width:10px;z-index: 1";
                    // this.$refs.chevron.icon='chevron-left';
                } else {
                    this.tip = true;
                    this.$refs.tipBtnGroup.style="position: absolute;right:292px;top:16px;width:10px;z-index: 1";
                    // this.$refs.chevron.icon='chevron-right';
                }
            }
        },
    }