Implementing browser full screen in vue project - screenfull

The browser comes with a full-screen function, but there are compatibility issues, so I used a plug-in instead.

document.documentElement.webkitRequestFullScreen()

Use screenFull plug-in to provide full screen functionality

Install plugin

npm i screenfull 

 Use plugins

Import screenfull from 'screenfull' in the full screen component

Add click event to icon

<el-icon size="18px" @click="magnify"><full-screen /></el-icon>

const magnify = () => {
	;(screenfull as any).toggle()
}

Realize the effect