diff --git a/.env.dev b/.env.dev new file mode 100644 index 0000000..a06eb18 --- /dev/null +++ b/.env.dev @@ -0,0 +1,2 @@ +VUE_APP_BASE_API='https://game2006api-test.kingsome.cn' +VUE_APP_GPAL_API='http://192.168.100.83:4000/sns' \ No newline at end of file diff --git a/.env.development b/.env.development deleted file mode 100644 index 2ae3c1c..0000000 --- a/.env.development +++ /dev/null @@ -1 +0,0 @@ -VITE_API_BASE_URL=http://localhost:3000 \ No newline at end of file diff --git a/README.md b/README.md index 191b484..038f4f9 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,74 @@ 运行代码指令 npm run dev -yarn run dev \ No newline at end of file +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 +