75 lines
2.7 KiB
Markdown
75 lines
2.7 KiB
Markdown
运行代码指令
|
||
npm run dev
|
||
yarn run dev
|
||
在Vue 3中重新实现并优化上述代码，可以按照以下步骤进行：
|
||
|
||
在Vue 3组件中，使用<iframe>标签嵌入你要显示的内容，例如：
|
||
html
|
||
Copy code
|
||
<template>
|
||
<div>
|
||
<iframe :src="screenUrl" frameborder='0' allowfullscreen="true" scrolling="no" width="100%" height="100%"></iframe>
|
||
</div>
|
||
</template>
|
||
其中，:src属性绑定的是iFrame要显示的网页链接，allowfullscreen属性用于在iFrame中开启全屏模式。
|
||
|
||
在Vue 3组件中，为需要全屏的元素添加点击事件。可以使用@click指令或者v-on:click指令来绑定点击事件，例如：
|
||
html
|
||
Copy code
|
||
<template>
|
||
<div>
|
||
<div class="top-left" @click="toggleFullScreen"></div>
|
||
<iframe :src="screenUrl" frameborder='0' allowfullscreen="true" scrolling="no" width="100%" height="100%"></iframe>
|
||
</div>
|
||
</template>
|
||
其中，@click="toggleFullScreen"表示当点击元素时，会触发组件内的toggleFullScreen方法。
|
||
|
||
在Vue 3组件的methods属性中，定义toggleFullScreen方法，用于切换全屏状态。可以使用document.fullscreenElement属性来判断当前是否处于全屏状态，使用document.documentElement.requestFullscreen()方法来请求进入全屏状态，使用document.exitFullscreen()方法来退出全屏状态，例如：
|
||
html
|
||
Copy code
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
screenUrl: "https://www.example.com", // iFrame要显示的网页链接
|
||
isFullScreen: false // 记录全屏状态
|
||
};
|
||
},
|
||
methods: {
|
||
toggleFullScreen() {
|
||
if (this.isFullScreen) {
|
||
// 退出全屏
|
||
document.exitFullscreen();
|
||
this.isFullScreen = false;
|
||
} else {
|
||
// 进入全屏
|
||
const de = document.documentElement;
|
||
if (de.requestFullscreen) {
|
||
de.requestFullscreen();
|
||
} else if (de.mozRequestFullScreen) {
|
||
de.mozRequestFullScreen();
|
||
} else if (de.webkitRequestFullScreen) {
|
||
de.webkitRequestFullScreen();
|
||
} else if (de.msRequestFullscreen) {
|
||
de.msRequestFullscreen();
|
||
}
|
||
this.isFullScreen = true;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
其中，isFullScreen属性用于记录全屏状态，toggleFullScreen方法用于切换全屏状态。注意，为了让iFrame在全屏状态下铺满整个屏幕，需要在iFrame的父元素上加上height: 100vh样式。另外，由于mozCancelFullScreen()方法在Firefox中已经被弃用，建议使用document.exitFullscreen()方法来退出全屏状态。
|
||
|
||
完整的Vue 3代码示例如下：
|
||
|
||
html
|
||
Copy code
|
||
<template>
|
||
<div>
|
||
<div class="top-left" @click="toggleFullScreen"></div>
|
||
<iframe :src="screenUrl" frameborder='0' allowfullscreen="true" scrolling="no" width="100%" height="100%"></iframe>
|
||
|
||
|
||
|