fix(projects): 修复tab过多时样式坍塌,添加tab横向滚动
This commit is contained in:
parent
e59b85a8a8
commit
0ec4d218e3
@ -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",
|
||||
|
@ -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'
|
||||
|
43
src/components/custom/BetterScroll/index.vue
Normal file
43
src/components/custom/BetterScroll/index.vue
Normal 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>
|
@ -16,7 +16,7 @@
|
||||
@mouseenter="setTrue"
|
||||
@mouseleave="setFalse"
|
||||
>
|
||||
<span>
|
||||
<span class="whitespace-nowrap">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<div v-if="closable" class="pl-10px">
|
||||
|
@ -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">
|
||||
|
@ -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 };
|
||||
|
@ -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';
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user