fix(projects): 修复tab过多时样式坍塌,添加tab横向滚动

This commit is contained in:
Soybean 2021-10-30 17:27:56 +08:00
parent e59b85a8a8
commit 0ec4d218e3
8 changed files with 71 additions and 5 deletions

View File

@ -18,6 +18,7 @@
"*.{vue,js,jsx,ts,tsx}": "eslint --fix"
},
"dependencies": {
"@better-scroll/core": "^2.4.2",
"@vueuse/core": "^6.7.4",
"axios": "^0.24.0",
"chroma-js": "^2.1.2",

View File

@ -1,6 +1,7 @@
lockfileVersion: 5.3
specifiers:
'@better-scroll/core': ^2.4.2
'@commitlint/cli': ^13.2.1
'@commitlint/config-conventional': ^13.2.0
'@iconify/json': ^1.1.417
@ -61,6 +62,7 @@ specifiers:
windicss: ^3.2.0
dependencies:
'@better-scroll/core': registry.npmmirror.com/@better-scroll/core/2.4.2
'@vueuse/core': registry.npmmirror.com/@vueuse/core/6.7.4_vue@3.2.20
axios: registry.npmmirror.com/axios/0.24.0
chroma-js: registry.nlark.com/chroma-js/2.1.2
@ -4576,6 +4578,20 @@ packages:
engines: {node: '>=6.0.0'}
hasBin: true
registry.npmmirror.com/@better-scroll/core/2.4.2:
resolution: {integrity: sha1-5pRwAS15kjoYA0w+STFyD7sG6uU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@better-scroll/core/download/@better-scroll/core-2.4.2.tgz}
name: '@better-scroll/core'
version: 2.4.2
dependencies:
'@better-scroll/shared-utils': registry.npmmirror.com/@better-scroll/shared-utils/2.4.2
dev: false
registry.npmmirror.com/@better-scroll/shared-utils/2.4.2:
resolution: {integrity: sha1-GsXJdJVycJOiKoAJVgeV3V48GNo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@better-scroll/shared-utils/download/@better-scroll/shared-utils-2.4.2.tgz}
name: '@better-scroll/shared-utils'
version: 2.4.2
dev: false
registry.npmmirror.com/@commitlint/cli/13.2.1:
resolution: {integrity: sha1-gOvUa+72zu07sMCEK82o0Co8kd4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@commitlint/cli/download/@commitlint/cli-13.2.1.tgz}
name: '@commitlint/cli'

View File

@ -0,0 +1,43 @@
<template>
<div ref="scrollbar" class="w-full h-full text-left">
<div ref="scrollbarContent" class="inline-block" :class="{ 'h-full': !options.scrollY }">
<slot></slot>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import type { PropType } from 'vue';
import BScroll from '@better-scroll/core';
import type { Options } from '@better-scroll/core';
import { useElementSize } from '@vueuse/core';
const props = defineProps({
options: {
type: Object as PropType<Options>,
required: true
}
});
const scrollbar = ref<HTMLElement | null>(null);
const bsInstance = ref<BScroll | null>(null);
const scrollbarContent = ref<HTMLElement | null>(null);
function initBetterScroll() {
bsInstance.value = new BScroll(scrollbar.value!, props.options);
}
// BS
const { width, height } = useElementSize(scrollbarContent);
watch([() => width.value, () => height.value], () => {
if (bsInstance.value) {
bsInstance.value.refresh();
}
});
onMounted(() => {
initBetterScroll();
});
</script>
<style scoped></style>

View File

@ -16,7 +16,7 @@
@mouseenter="setTrue"
@mouseleave="setFalse"
>
<span>
<span class="whitespace-nowrap">
<slot></slot>
</span>
<div v-if="closable" class="pl-10px">

View File

@ -14,7 +14,7 @@
:primary-color="primaryColor"
/>
</div>
<span class="relative z-2">
<span class="relative whitespace-nowrap z-2">
<slot></slot>
</span>
<div v-if="closable" class="pl-18px">

View File

@ -3,5 +3,6 @@ import IconClose from './IconClose/index.vue';
import ButtonTab from './ButtonTab/index.vue';
import ChromeTab from './ChromeTab/index.vue';
import ShadowCard from './ShadowCard/index.vue';
import BetterScroll from './BetterScroll/index.vue';
export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard };
export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard, BetterScroll };

View File

@ -1,2 +1,2 @@
export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer } from './common';
export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard } from './custom';
export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard, BetterScroll } from './custom';

View File

@ -8,7 +8,11 @@
justify="space-between"
:item-style="{ paddingTop: '0px', paddingBottom: '0px' }"
>
<multi-tab />
<div class="flex-1-hidden h-full">
<better-scroll :options="{ scrollX: true, scrollY: false }">
<multi-tab />
</better-scroll>
</div>
<reload-button />
</div>
</template>
@ -17,6 +21,7 @@
import { computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useThemeStore, useAppStore } from '@/store';
import { BetterScroll } from '@/components';
import { MultiTab, ReloadButton } from './components';
defineProps({