From 4ed30964ee224904f6050fa01c626643ef08bd7b Mon Sep 17 00:00:00 2001 From: huangjinming Date: Wed, 1 Mar 2023 14:10:09 +0800 Subject: [PATCH] new --- .env.dev | 2 + .env.development | 1 - README.md | 73 +- index.html | 7 +- package-lock.json | 17399 +++++++++++++++++++++++++++ package.json | 12 +- postcss.config.cjs | 23 + src/api/User.js | 50 + src/components/home/NavBar.vue | 31 +- src/components/home/VideoModal.vue | 13 +- src/utils/request.ts | 2 +- vite.config.js | 29 +- yarn.lock | 8470 +++++++------ 13 files changed, 22501 insertions(+), 3611 deletions(-) create mode 100644 .env.dev delete mode 100644 .env.development create mode 100644 package-lock.json create mode 100644 postcss.config.cjs create mode 100644 src/api/User.js 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 +