From 2c9660fdbf9a84e980db0aff5cd0aed0f75963ca Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Mon, 7 Feb 2022 15:46:35 +0800 Subject: [PATCH] =?UTF-8?q?fix(components):=20=E4=BF=AE=E5=A4=8DTab?= =?UTF-8?q?=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=AE=BE=E5=A4=87=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E7=82=B9=E5=87=BB=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ pnpm-lock.yaml | 16 ++++++++++++++++ src/components/custom/BetterScroll/index.vue | 3 ++- src/composables/common/system.ts | 12 ++++++------ src/layouts/common/GlobalTab/index.vue | 7 ++++--- 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 13c0fabe9..98908c2d7 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "print-js": "^1.6.0", "qs": "^6.10.3", "swiper": "^8.0.3", + "ua-parser-js": "^1.0.2", "vditor": "^3.8.11", "vue": "^3.2.29", "vue-router": "^4.0.12", @@ -55,6 +56,7 @@ "@types/crypto-js": "^4.1.0", "@types/node": "^17.0.15", "@types/qs": "^6.9.7", + "@types/ua-parser-js": "^0.7.36", "@typescript-eslint/eslint-plugin": "^5.10.2", "@typescript-eslint/parser": "^5.10.2", "@vitejs/plugin-vue": "^2.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04563032c..82a2e221c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,6 +12,7 @@ specifiers: '@types/crypto-js': ^4.1.0 '@types/node': ^17.0.15 '@types/qs': ^6.9.7 + '@types/ua-parser-js': ^0.7.36 '@typescript-eslint/eslint-plugin': ^5.10.2 '@typescript-eslint/parser': ^5.10.2 '@vitejs/plugin-vue': ^2.1.0 @@ -49,6 +50,7 @@ specifiers: sass: ^1.49.7 swiper: ^8.0.3 typescript: ^4.5.5 + ua-parser-js: ^1.0.2 unplugin-icons: ^0.13.0 unplugin-vue-components: ^0.17.17 vditor: ^3.8.11 @@ -80,6 +82,7 @@ dependencies: print-js: registry.npmmirror.com/print-js/1.6.0 qs: registry.npmmirror.com/qs/6.10.3 swiper: registry.npmmirror.com/swiper/8.0.3 + ua-parser-js: registry.npmmirror.com/ua-parser-js/1.0.2 vditor: registry.npmmirror.com/vditor/3.8.11 vue: registry.npmmirror.com/vue/3.2.29 vue-router: registry.npmmirror.com/vue-router/4.0.12_vue@3.2.29 @@ -96,6 +99,7 @@ devDependencies: '@types/crypto-js': registry.npmmirror.com/@types/crypto-js/4.1.0 '@types/node': registry.npmmirror.com/@types/node/17.0.15 '@types/qs': registry.npmmirror.com/@types/qs/6.9.7 + '@types/ua-parser-js': registry.npmmirror.com/@types/ua-parser-js/0.7.36 '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.10.2_2595c2126aec4d4b6e944b931dabb4c2 '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.10.2_eslint@8.8.0+typescript@4.5.5 '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.1.0_vite@2.7.13+vue@3.2.29 @@ -2873,6 +2877,12 @@ packages: version: 2.1.0 dev: true + registry.npmmirror.com/@types/ua-parser-js/0.7.36: + resolution: {integrity: sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz} + name: '@types/ua-parser-js' + version: 0.7.36 + dev: true + registry.npmmirror.com/@types/yargs-parser/20.2.1: resolution: {integrity: sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz} name: '@types/yargs-parser' @@ -7087,6 +7097,12 @@ packages: hasBin: true dev: true + registry.npmmirror.com/ua-parser-js/1.0.2: + resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz} + name: ua-parser-js + version: 1.0.2 + dev: false + registry.npmmirror.com/uglify-js/2.8.29: resolution: {integrity: sha1-KcVzMUgFe7Th913zW3qcty5qWd0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/uglify-js/download/uglify-js-2.8.29.tgz} name: uglify-js diff --git a/src/components/custom/BetterScroll/index.vue b/src/components/custom/BetterScroll/index.vue index 78ba60097..5867ab715 100644 --- a/src/components/custom/BetterScroll/index.vue +++ b/src/components/custom/BetterScroll/index.vue @@ -30,8 +30,9 @@ function initBetterScroll() { } // 滚动元素发生变化，刷新BS +const { width: wrapWidth } = useElementSize(bsWrap); const { width, height } = useElementSize(bsContent); -watch([() => width.value, () => height.value], () => { +watch([() => wrapWidth.value, () => width.value, () => height.value], () => { if (instance.value) { instance.value.refresh(); } diff --git a/src/composables/common/system.ts b/src/composables/common/system.ts index 2f817f569..8c8a764c0 100644 --- a/src/composables/common/system.ts +++ b/src/composables/common/system.ts @@ -1,4 +1,4 @@ -import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'; +import UAParser from 'ua-parser-js'; interface AppInfo { /** 项目名称 */ @@ -20,9 +20,9 @@ export function useAppInfo(): AppInfo { }; } -/** 是否是移动端 */ -export function useIsMobile() { - const breakpoints = useBreakpoints(breakpointsTailwind); - const isMobile = breakpoints.smaller('lg'); - return isMobile; +/** 获取设备信息 */ +export function useDeviceInfo() { + const parser = new UAParser(); + const result = parser.getResult(); + return result; } diff --git a/src/layouts/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue index 2f7af9bd8..8e04263d8 100644 --- a/src/layouts/common/GlobalTab/index.vue +++ b/src/layouts/common/GlobalTab/index.vue @@ -1,7 +1,7 @@