Implement browser full screen function in VUE3

1. Install screenfull 

npm install screenfull

 

2. Introduce in the vue page 

 import screenfull from 'screenfull'

 3. Define the full screen method

const SetFullScreen = () => {

    //screenfull.isEnabled This method returns a boolean value to determine whether the current full screen can be entered

    if (!screenfull.isEnabled) {

        return false

    }

    //screenfull.toggle This method is to perform a full-screen operation. Exit full screen if already full screen

    screenfull.toggle()

}

 4. Call method

            <el-button type="primary" 

               @click="SetFullScreen">full screen</el-button>