< button v-if = " !ifFullScreen " @click = " fullScreenPage " > 整个页面全屏 </ button > < button v-if = " ifFullScreen " @click = " exitFullScreen " > 退出全屏 </ button > < button @click = " fullScreenPart( ' fatherID ' ) " > 指定元素全屏 </ button > < div class = " box " id = " fatherID " > </ div > </ div > </ template > < script > export default { mounted ( ) { // 监听浏览器全屏事件 let that = this ; document . addEventListener ( "fullscreenchange" , function ( ) { that . getFullScreenStatus ( ) ; } ) ; document . addEventListener ( "mozfullscreenchange" , function ( ) { that . getFullScreenStatus ( ) ; } ) ; document . addEventListener ( "webkitfullscreenchange" , function ( ) { that . getFullScreenStatus ( ) ; } ) ; document . addEventListener ( "msfullscreenchange" , function ( ) { that . getFullScreenStatus ( ) ; } ) ; data ( ) { return { ifFullScreen : false , methods : { // 整个页面全屏 fullScreenPage ( ) { fullScreen ( document . documentElement ) ; // 指定元素全屏——指定元素必须设置id，且全屏函数只对id获取元素有效 fullScreenPart ( id ) { let el = document . getElementById ( id ) ; fullScreen ( el ) ; // 退出全屏 exitFullScreen ( ) { exitFullScreen ( document . documentElement ) ; // 判断当前页面是否全屏 getFullScreenStatus ( ) { this . ifFullScreen = ! ! ( document . fullscreen || document . mozFullScreen || document . webkitIsFullScreen || document . webkitFullScreen || document . msFullScreen // 进入全屏 function fullScreen ( el ) { var rfs = el . requestFullScreen || el . webkitRequestFullScreen || el . mozRequestFullScreen || el . msRequestFullScreen , wscript ; if ( typeof rfs != "undefined" && rfs ) { rfs . call ( el ) ; return ; if ( typeof window . ActiveXObject != "undefined" ) { wscript = new ActiveXObject ( "WScript.Shell" ) ; if ( wscript ) { wscript . SendKeys ( "{F11}" ) ; // 退出全屏 function exitFullScreen ( el ) { var el = document , cfs = el . cancelFullScreen || el . webkitCancelFullScreen || el . mozCancelFullScreen || el . exitFullScreen , wscript ; if ( typeof cfs != "undefined" && cfs ) { cfs . call ( el ) ; return ; if ( typeof window . ActiveXObject != "undefined" ) { wscript = new ActiveXObject ( "WScript.Shell" ) ; if ( wscript != null ) { wscript . SendKeys ( "{F11}" ) ; </ script > < style scoped > .box { height : 200px ; width : 100px ; background : green ; /*全屏伪类：当元素处于全屏时，改变元素的背景色*/ .box:-webkit-full-screen { background-color : yellow ; .box:-moz-full-screen { background-color : yellow ; .box:fullscreen { background-color : yellow ; </ style > 各部分功能代码详见注释：&lt;template&gt; &lt;div&gt; &lt;button v-if="!ifFullScreen" @click="fullScreenPage"&gt;整个页面全屏&lt;/button&gt; &lt;button v-if="ifFullScreen" @click="exitFullScreen"&gt;退出全屏&lt;/button&gt; &lt;button @click="fullScreenPart('father https://blog.csdn.net/k358971707/article/details/60465689 这里直接上结果 function isFullscreenForNoScroll(){ var explorer = window.navigator.userAgent.toLowerCase(); if... ```javascript // 监听 全屏 模式改变 事件 document.addEventListener('fullscreenchange', handleFullscreenChange); function handleFullscreenChange() { if (document.fullscreenElement) { // 进入 全屏 模式 console.log(' 进入 全屏 '); } else { // 退出 全屏 模式 console.log(' 退出 全屏 '); 请注意，这个 事件 在不同 浏览器 中可能有不同的前缀，你可能需要添加对应的 浏览器 前缀来兼容不同的 浏览器 。例如，在Chrome 浏览器 中， 事件 名应该是`webkitfullscreenchange`，在Firefox 浏览器 中， 事件 名应该是`mozfullscreenchange`。 你还可以使用Vue的 事件 绑定来 监听 全屏 模式的改变，像这样： ```html <template> <div @fullscreenchange="handleFullscreenChange"></div> </template> <script> export default { methods: { handleFullscreenChange() { if (document.fullscreenElement) { // 进入 全屏 模式 console.log(' 进入 全屏 '); } else { // 退出 全屏 模式 console.log(' 退出 全屏 '); </script> 希望这可以帮助到你！如果还有其他问题，请随 时 提问。 lanmy_dl: 补充vue3的elementplus滚动条: <el-scrollbar height="300px" ref="leftRef">...</el-scrollbar> const leftRef = ref() 这时候可以打印leftRef 看看，里面有setScrollTop //然后就可以滚动到指定位置200px： leftRef .value.setScrollTop('200px') vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Make_Progress365: 完美解决！棒！ vue 在线聊天实战范例（含选择发送表情、图片、视频、音频，自定义右键快捷菜单，一键复制，左右聊天气泡） 朝阳39: element ui