diff --git a/.env.dev b/.env.dev new file mode 100644 index 0000000..4e67679 --- /dev/null +++ b/.env.dev @@ -0,0 +1,4 @@ +VUE_APP_BASE_API='https://market.cebg.games' +VUE_APP_BASE_API2='https://invitation.counterfire.games' +//VUE_APP_BASE_API2='http://192.168.100.83:3000/' +VUE_APP_GPAL_API='https://www.counterfire.games' \ No newline at end of file diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..a5a3813 --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +VUE_APP_BASE_API='https://market.cebg.games' +VUE_APP_GPAL_API='http://192.168.100.83:4000/sns' \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..48e7ef4 --- /dev/null +++ b/.env.production @@ -0,0 +1,3 @@ +VUE_APP_BASE_API='https://market.cebg.games' +VUE_APP_BASE_API2='https://invitation.counterfire.games' +VUE_APP_GPAL_API='https://www.counterfire.games' \ No newline at end of file diff --git a/.evn.test b/.evn.test new file mode 100644 index 0000000..0f8f5fc --- /dev/null +++ b/.evn.test @@ -0,0 +1 @@ +//VITE_API_BASE_URL=http://localhost:5000 \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b28a5d8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,15 @@ +.DS_Store +node_modules/ +/dist/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln + diff --git a/README.md b/README.md index 1e82034..038f4f9 100644 --- a/README.md +++ b/README.md @@ -1 +1,74 @@ -CounterFirePC \ No newline at end of file +运行代码指令 +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 +