new
This commit is contained in:
huangjinming
parent
b69b6921d3
commit
4ed30964ee
2
.env.dev
Normal file
2
.env.dev
Normal file
@ -0,0 +1,2 @@
|
||||
VUE_APP_BASE_API='https://game2006api-test.kingsome.cn'
|
||||
VUE_APP_GPAL_API='http://192.168.100.83:4000/sns'
|
||||
@ -1 +0,0 @@
|
||||
VITE_API_BASE_URL=http://localhost:3000
|
||||
71
README.md
71
README.md
@ -1,3 +1,74 @@
|
||||
运行代码指令
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,11 +2,16 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
</head>
|
||||
<script type="module">
|
||||
import {Buffer} from 'buffer';
|
||||
window.Buffer = Buffer;
|
||||
</script>
|
||||
<body>
|
||||
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
17399
package-lock.json
generated
Normal file
17399
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -4,21 +4,29 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build:dev": "vite build --mode development",
|
||||
"dev": "vite --host --mode dev",
|
||||
"build:dev": "vite build --mode dev",
|
||||
"build:test": "vite build --mode test",
|
||||
"build:prod": "vite build --mode production"
|
||||
},
|
||||
"dependencies": {
|
||||
"@animxyz/core": "^0.6.6",
|
||||
"@animxyz/vue3": "^0.6.7",
|
||||
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
||||
"@vueuse/core": "^9.12.0",
|
||||
"@walletconnect/web3-provider": "^1.8.0",
|
||||
"ant-design-vue": "^3.2.15",
|
||||
"axios": "^1.3.3",
|
||||
"buffer": "^6.0.3",
|
||||
"js-cookie": "^3.0.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.0.30",
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"process": "^0.11.10",
|
||||
"rollup-plugin-polyfill-node": "^0.12.0",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"swiper": "8",
|
||||
"util": "^0.12.5",
|
||||
"video.js": "^8.0.4",
|
||||
"videojs-flash": "^2.2.1",
|
||||
"vue": "^3.2.45",
|
||||
|
||||
23
postcss.config.cjs
Normal file
23
postcss.config.cjs
Normal file
@ -0,0 +1,23 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-px-to-viewport': {
|
||||
unitToConvert: 'px', // 需要转换的单位，默认为"px"
|
||||
viewportWidth: 1920, // 设计稿的视口宽度
|
||||
unitPrecision: 5, // 单位转换后保留的精度
|
||||
propList: ['*'], // 能转化为vw的属性列表
|
||||
viewportUnit: 'vw', // 希望使用的视口单位
|
||||
fontViewportUnit: 'vw', // 字体使用的视口单位
|
||||
selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
|
||||
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
|
||||
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
|
||||
replace: true, // 是否直接更换属性值，而不添加备用属性
|
||||
exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
|
||||
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
|
||||
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
|
||||
landscapeUnit: 'vw', // 横屏时使用的单位
|
||||
landscapeWidth: 1920 // 横屏时使用的视口宽度
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
50
src/api/User.js
Normal file
50
src/api/User.js
Normal file
@ -0,0 +1,50 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
const GPAL_URL = import.meta.env.VUE_APP_GPAL_API;
|
||||
|
||||
export const defaultUser = {
|
||||
id: '',
|
||||
username: '',
|
||||
showname: '',
|
||||
comment: '',
|
||||
locked: false,
|
||||
password: '',
|
||||
avatar: '',
|
||||
account: ''
|
||||
}
|
||||
/**
|
||||
* @param data {account: string, token: string}
|
||||
*/
|
||||
export const getUserInfo = (data) =>
|
||||
request({
|
||||
url: '/webapp/index.php?c=BcUser&a=info',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
|
||||
export const login = (data) =>
|
||||
request({
|
||||
url: '/webapp/index.php?c=Market&a=auth',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
|
||||
export const logout = () =>
|
||||
request({
|
||||
url: '/api/user/logout',
|
||||
method: 'post'
|
||||
})
|
||||
//
|
||||
// export const changePass = (params: any) =>
|
||||
// request({
|
||||
// url: '/api/user/passwd',
|
||||
// method: 'post',
|
||||
// data: params
|
||||
// })
|
||||
|
||||
export const getNonce = (params) =>
|
||||
request({
|
||||
url: '/webapp/index.php?c=Market&a=getNonce',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
@ -12,14 +12,41 @@
|
||||
>
|
||||
<span> {{ nav.name }}</span></a
|
||||
>
|
||||
<div class="login-btn login-btn-active">LOGIN</div>
|
||||
<div class="login-btn login-btn-active" @click="login">LOGIN</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChainModel></ChainModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ref, reactive, onMounted ,} from "vue";
|
||||
import { useChainStore }from '@/store/chain';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import ChainModel from './ChainModel.vue'
|
||||
|
||||
const router = useRouter();
|
||||
const chain = useChainStore();
|
||||
|
||||
function click(event) {
|
||||
router.push(event.key);
|
||||
|
||||
}
|
||||
|
||||
async function login(event) {
|
||||
if (!chain.logined) {
|
||||
// 没有登录情况下执行登录
|
||||
await chain.chainManager.login()
|
||||
console.log("logined:", chain.chainManager.isLogined);
|
||||
chain.logined = chain.chainManager.isLogined;
|
||||
}
|
||||
else{
|
||||
// 已经登录过就退出登录
|
||||
await chain.chainManager.logout();
|
||||
console.log("logined:", chain.chainManager.isLogined);
|
||||
chain.logined = chain.chainManager.isLogined;
|
||||
}
|
||||
}
|
||||
|
||||
const curentid = ref(0);
|
||||
const navList = reactive([
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
@cancel="handleCancel"
|
||||
@ok="handleOk"
|
||||
:footer="null"
|
||||
width="70%"
|
||||
width="100vw"
|
||||
>
|
||||
<div class="video-content">
|
||||
<video
|
||||
@ -52,5 +52,16 @@ function open() {
|
||||
video{
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
:deep(.ant-modal) {
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-body) {
|
||||
height: calc(100vh - 55px - 53px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import axios from 'axios'
|
||||
// import { message } from 'ant-design-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
import glodata from '@/store/user_global';
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
|
||||
import requireTransform from "vite-plugin-require-transform";
|
||||
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
|
||||
import { resolve } from "path";
|
||||
import nodePolyfills from 'rollup-plugin-polyfill-node';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
@ -15,8 +16,14 @@ export default defineConfig({
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录
|
||||
'@' : resolve(__dirname, 'src'),
|
||||
process: "process/browser",
|
||||
stream: "stream-browserify",
|
||||
zlib: "browserify-zlib",
|
||||
util: 'util',
|
||||
web3: resolve(__dirname, 'node_modules/web3/dist/web3.min.js')
|
||||
},
|
||||
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
|
||||
},
|
||||
base: "./", // 设置打包路径
|
||||
build: {
|
||||
@ -33,8 +40,28 @@ export default defineConfig({
|
||||
// 环境变量
|
||||
env: {
|
||||
BASE_URL: process.env.VITE_API_BASE_URL
|
||||
},
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
plugins: [nodePolyfills()],
|
||||
},
|
||||
commonjsOptions: {
|
||||
transformMixedEsModules: true,
|
||||
}
|
||||
},
|
||||
envPrefix:"VUE_APP_",
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: {
|
||||
global: "globalThis",
|
||||
},
|
||||
plugins: [
|
||||
]
|
||||
}
|
||||
},
|
||||
define: {
|
||||
'process.env': process.env
|
||||
},
|
||||
server: {
|
||||
port: 4000, // 设置服务启动端口号
|
||||
open: false, // 设置服务启动时是否自动打开浏览器
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user