使用Screenfull库来实现全屏效果

今天介绍一个Javascript的第三方库screenfull，简单易用，在github上已经有5000多🌟了

1. 使用前需要先安装，利用npm install就行

npm install screenfull

2.介绍几个核心方法和属性：

2.1  screenfull.toggle()

这个方法会请求全屏，如果当前是全屏则会退出全屏。

2.2 screenfull.isFullscreen

返回一个布尔值，当前是否是全屏状态。

2.3  screenfull.isEnabled

返回一个布尔值，是否当前可以进入全屏。

注意：这个第三方库支持电脑桌面或ipad上使用Safari浏览器，但是iphone是不行的。

3. 实例：

下面介绍在个人博客中使用此第三方库的例子。这里需要先定义一个变量来表示当前是否全屏的状态，默认初始化是false。然后，这里根据状态值判断展示不同的小图标icon，当点击图标时，会调用screenFullToggle函数来使用toggle()方法。当每次全屏或退出全屏之后，再将fullscreen的状态置反。具体代码如下：

 state = {
        fullScreen: false
    }

    screenFullToggle = (fullScreen) => {
        if (screenfull.isEnabled) {
            screenfull.toggle()
            this.setState({
                fullScreen: !fullScreen
            })
        }
    }

    render() {
        const {fullScreen} = this.state
        const path = this.props.location.pathname
        return (
            <div className={'blog-nav'}>
                <span>
                    <a href={'#/blog/home'} className={'header-left'}>
                        Martin's Blog
                    </a>
                </span>
                <span>
                    {fullScreen ?
                        <div className={'header-right'} onClick={() => this.screenFullToggle(fullScreen)}>
                            <ShrinkOutlined/></div>
                        : <div className={'header-right'} onClick={() => this.screenFullToggle(fullScreen)}>
                            <ArrowsAltOutlined/></div>}

全屏前： 

全屏后：按esc键可以退出全屏模式 

 

参考资料：

1. github地址：https://github.com/sindresorhus/screenfull.js