jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): 修复Tab在移动端设备无法点击的问题

Browse Source
This commit is contained in:
Soybean
2022-02-07 15:46:35 +08:00
parent e93b94cb24
commit 2c9660fdbf
5 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/layouts/common/GlobalTab/index.vue
View File

@ -1,7 +1,7 @@
<template>
<dark-mode-container class="global-tab flex-y-center w-full pl-16px" :style="{ height: theme.tab.height + 'px' }">
<div ref="bsWrapper" class="flex-1-hidden h-full">
<better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: isMobile }">
<better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: canClick }">
<tab-detail @scroll="handleScroll" />
</better-scroll>
</div>
@ -15,20 +15,21 @@ import { useRoute } from 'vue-router';
import { useElementBounding } from '@vueuse/core';
import { DarkModeContainer, BetterScroll } from '@/components';
import { useThemeStore, useTabStore } from '@/store';
import { useIsMobile } from '@/composables';
import { useDeviceInfo } from '@/composables';
import type { ExposeBetterScroll } from '@/interface';
import { TabDetail, ReloadButton } from './components';
const route = useRoute();
const theme = useThemeStore();
const tab = useTabStore();
const deviceInfo = useDeviceInfo();
const bsWrapper = ref<HTMLElement>();
const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapper);
const bsScroll = ref<ExposeBetterScroll>();
const isMobile = useIsMobile();
const canClick = Boolean(deviceInfo.device.type);
function handleScroll(clientX: number) {
const currentX = clientX - bsWrapperLeft.value;