技術標籤：前端vuevue

一、寫在前面

想信你看到這篇文章的時候,就知道,你需要一個最簡單的一鍵全屏解決方案了。

二、進入主題

1.最簡單的就是使用一個第三方的包,screenfull copy下面的命令即可安裝:

npm i screenfull --save
//or
cnpm i screenfull --save
//or
yarn add screenfull

2.封裝一個全屏的按鈕: AppScreenfull/index.vue

<template>
    <span :title="title" :class="status"
 
 @click="click" />
</template>
<script>
import screenfull from 'screenfull';
export default {
    name: 'Screenfull',
    data() {
        return {
            isFullscreen: false
        };
    },
    computed: {
        status() {
        	//這個地方返回的class是我iconfont裡的,可以自己找兩個圖示的class放這裡
 

            return this.isFullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen';
        },
        title() {
            return this.isFullscreen ? '退出全屏' : '進入全屏';
        }
    },
    mounted() {
        this.init();
    },
    beforeDestroy() {
        this.destroy();
    },
    methods:
 
 {
        click() {
            if (!screenfull.isEnabled) return alert(`您的裝置不支援全屏`);
            screenfull.toggle();
        },
        change() {
            this.isFullscreen = screenfull.isFullscreen;
        },
        init() {
            if (screenfull.isEnabled) screenfull.on('change', this.change);
        },
        destroy() {
            if (screenfull.isEnabled) screenfull.off('change', this.change);
        }
    }
};
</script>

三、上面就是vue一鍵全屏解決方案的全部內容了

加油，快去試試吧,。

上面的程式碼部分是由真實專案簡化而來的,有問題請留言或者@博主,謝謝支援o(￣︶￣)o~

感謝您的閱讀,如果此文章或專案對您有幫助，請給個一鍵三連吧,GitHub有開源專案,需要的小夥伴可以順手star一下！

GitHub: https://github.com/langyuxiansheng

更多資訊請關注公眾號: “筆優站長”