指定元素全屏

翛翾梓

已于 2023-02-14 16:33:05 修改

阅读量287

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-05-31 17:02:29 首次发布

本文链接：https://blog.csdn.net/weixin_43118088/article/details/125069242

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中实现指定元素的全屏功能。通过监听点击事件，动态切换元素的全屏状态。当用户点击按钮时，使用浏览器提供的全屏API，如requestFullscreen，来进入全屏模式；退出时则调用exitFullscreen等相关方法退出全屏。示例代码展示了数据绑定和事件处理的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

指定元素全屏vue

指定元素全屏

指定元素全屏

    <li :class="['map-toolbar-item',!fullscreen?'':'active']" @click="launchFullScreen()">
      <i :class="['map-toolbar-icon', 'iconfont', 'iconfangda']"></i>
      <span class="map-toolbar-label">{{ !fullscreen?'全屏':'退出全屏' }}</span>
    </li>

data () {
return {
fullscreen: false,
swnum: 1
}
},
methods: {
// 开启全屏
launchFullScreen() {
this.fullscreen = !this.fullscreen
const element = document.getElementById(‘homeContent’)
if (this.fullscreen) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozExitFullScreen) {
document.mozExitFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
},