2023-12-27 14:17:00 +08:00
2023-12-27 14:17:00 +08:00
2023-12-27 14:17:00 +08:00
fix
2023-07-15 19:58:56 +08:00
fix
2023-07-15 19:58:56 +08:00
fix
2023-07-15 19:58:56 +08:00
2023-02-17 11:03:41 +08:00
2023-02-17 14:08:36 +08:00
2023-12-27 14:17:00 +08:00
fix
2023-07-15 19:58:56 +08:00
fix
2023-06-28 15:27:06 +08:00
fix
2023-06-28 15:27:06 +08:00
fix
2023-06-28 15:27:06 +08:00
fix
2023-06-28 15:27:06 +08:00
new
2023-03-01 14:10:09 +08:00
...
2023-03-09 17:32:21 +08:00
fix
2023-06-28 15:27:06 +08:00
2023-02-17 11:03:41 +08:00
fix
2023-06-28 15:27:06 +08:00
fix
2023-06-28 15:27:06 +08:00

运行代码指令 npm run dev yarn run dev 在Vue 3中重新实现并优化上述代码可以按照以下步骤进行

在Vue 3组件中使用 其中,:src属性绑定的是iFrame要显示的网页链接allowfullscreen属性用于在iFrame中开启全屏模式。

在Vue 3组件中为需要全屏的元素添加点击事件。可以使用@click指令或者v-on:click指令来绑定点击事件例如 html Copy code

其中,@click="toggleFullScreen"表示当点击元素时会触发组件内的toggleFullScreen方法。

在Vue 3组件的methods属性中定义toggleFullScreen方法用于切换全屏状态。可以使用document.fullscreenElement属性来判断当前是否处于全屏状态使用document.documentElement.requestFullscreen()方法来请求进入全屏状态使用document.exitFullscreen()方法来退出全屏状态,例如: html Copy code

其中isFullScreen属性用于记录全屏状态toggleFullScreen方法用于切换全屏状态。注意为了让iFrame在全屏状态下铺满整个屏幕需要在iFrame的父元素上加上height: 100vh样式。另外由于mozCancelFullScreen()方法在Firefox中已经被弃用建议使用document.exitFullscreen()方法来退出全屏状态。

完整的Vue 3代码示例如下

html Copy code

Description
No description provided
Readme 612 MiB
Languages
Vue 67.3%
TypeScript 26.8%
JavaScript 4.7%
CSS 0.8%
HTML 0.4%