feat: add mouse scrolling handler for tabs component (#4453)

#### What type of PR is this?

/area console
/kind feature
/milestone 2.9.x

#### What this PR does / why we need it:

Console 端的 Tabs 组件支持通过鼠标滚动选项卡。

![2023-08-21 16 15 46](https://github.com/halo-dev/halo/assets/21301288/8fa56d4d-04d3-47a5-8515-2caf54ac9258)

#### Which issue(s) this PR fixes:

Fixes #4353 

#### Special notes for your reviewer:

None

#### Does this PR introduce a user-facing change?

```release-note
Console 端的 Tabs 组件支持通过鼠标滚动选项卡。
```
pull/4487/head
Ryan Wang 2023-08-25 03:38:15 -05:00 committed by GitHub
parent 5c115563e0
commit 141e22e2c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 2 deletions

View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { computed } from "vue";
import { computed, onMounted, onUnmounted, ref } from "vue";
import type { Direction, Type } from "./interface";
const props = withDefaults(
@ -34,10 +34,35 @@ const handleChange = (id: number | string) => {
emit("update:activeId", id);
emit("change", id);
};
const tabbarItemsRef = ref<HTMLElement | undefined>();
function handleHorizontalWheel(event: WheelEvent) {
if (!tabbarItemsRef.value) {
return;
}
const { scrollLeft, scrollWidth, clientWidth } = tabbarItemsRef.value;
const toLeft = event.deltaY < 0 && scrollLeft > 0;
const toRight = event.deltaY > 0 && scrollLeft < scrollWidth - clientWidth;
if (toLeft || toRight) {
event.preventDefault();
event.stopPropagation();
tabbarItemsRef.value.scrollBy({ left: event.deltaY });
}
}
onMounted(() => {
tabbarItemsRef.value?.addEventListener("wheel", handleHorizontalWheel);
});
onUnmounted(() => {
tabbarItemsRef.value?.removeEventListener("wheel", handleHorizontalWheel);
});
</script>
<template>
<div :class="classes" class="tabbar-wrapper">
<div class="tabbar-items">
<div ref="tabbarItemsRef" class="tabbar-items">
<div
v-for="(item, index) in items"
:key="index"