feat: 为文件夹插件导航栏添加滚动条以及鼠标滚轮相关事件处理

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -8,9 +8,16 @@
          class="container-top-colorfulBar"
          :style="{ backgroundColor: props.color }"></div>
       <div class="container-top-breadcrumb">
+         <n-scrollbar
+            ref="scrollbarRef"
+            :x-scrollable="true"
+            class="container-top-breadcrumb-scroll"
+            @wheel="handleWheel">
             <div class="container-top-breadcrumb-container">
-            <!-- <n-scrollbar x-scrollable> -->
+               <n-breadcrumb
-               <n-breadcrumb separator=">" style="margin-left: 5px">
+                  separator=">"
+                  class="sb-nn"
+                  style="margin-left: 5px">
                   <n-breadcrumb-item :clickable="false">
                      <n-icon size="18">
                         <CloudOutline />
@@ -23,8 +30,8 @@
                      <div>{{ dir.name }}</div>
                   </n-breadcrumb-item>
                </n-breadcrumb>
-            <!-- </n-scrollbar> -->
             </div>
+         </n-scrollbar>
       </div>
       <div class="container-top-tools">
          <n-icon
@@ -52,7 +59,13 @@
 </template>
 
 <script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown, NScrollbar } from 'naive-ui'
+import {
+   NBreadcrumbItem,
+   NBreadcrumb,
+   NIcon,
+   NDropdown,
+   NScrollbar
+} from 'naive-ui'
 import {
    CloudOutline,
    ChevronBackOutline,
@@ -60,6 +73,7 @@ import {
    EllipsisVertical
 } from '@vicons/ionicons5'
 import VirtualDirectory from '@/class/VirtualDirectory'
+import { ref } from 'vue'
 
 const props = defineProps<{
    color: string
@@ -79,9 +93,28 @@ const emit = defineEmits<{
    'set-current-directory': [virtualDirectory: VirtualDirectory]
 }>()
 
+const scrollbarRef = ref<InstanceType<typeof NScrollbar>>()
+
 const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
    emit('set-current-directory', virtualDirectory)
 }
+
+const handleWheel = (event: WheelEvent) => {
+   event.preventDefault()
+   event.stopPropagation()
+   if (scrollbarRef.value) {
+      scrollbarRef.value.scrollBy({
+         left: event.deltaY,
+         behavior: "smooth"
+      })
+   }
+}
+
+defineExpose({
+   // @ts-ignore
+   scrollTo: (...args: any[]) => scrollbarRef.value?.scrollTo(...args)
+   // getRef: () => scrollbarRef.value
+})
 </script>
 
 <style scoped lang="scss">
@@ -117,14 +150,15 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
       border-radius: 0 3px 3px 0;
 
       .container-top-breadcrumb-container {
-         position: absolute;
+         // position: absolute;
-         height: 100%;
+         height: 21px;
-         right: 0;
+         // right: 0;
-         top: 0;
+         // top: 0;
          min-width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
+         overflow: hidden;
       }
    }
 
@@ -164,3 +198,11 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
    }
 }
 </style>
+
+<style lang="scss">
+.container-top-breadcrumb-scroll {
+   .n-scrollbar-rail {
+      transform: translateY(5px);
+   }
+}
+</style>

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -7,6 +7,7 @@
          <div class="miao-directory-item-container" ref="rootDomRef">
             <!-- 顶部面包屑导航和工具栏 -->
             <miao-directory-top
+               ref="miaoDirectoryTopRef"
                :color="props.color"
                :current-directory="currentDirectory"
                @back="handleBack"
@@ -101,6 +102,7 @@ const searchText = ref<string>('')
 const showDirs = ref<boolean>(true)
 const showFiles = ref<boolean>(true)
 const miaoDirectoryItemRef = ref()
+const miaoDirectoryTopRef = ref<InstanceType<typeof miaoDirectoryTop>>()
 const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
 
 class SelectedItem {
@@ -297,6 +299,16 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
                top: 0,
                behavior: 'instant'
             })
+            // miaoDirectoryTopRef.value &&
+            //    miaoDirectoryTopRef.value.scrollTo({
+            //    top: 0,
+            //    behavior: 'instant'
+            // })
+            miaoDirectoryTopRef.value?.scrollTo({
+               top: 0,
+               left: 999,
+               behavior: 'instant'
+            })
          })
       }
       currentDirectories.value[0] = virtualDirectory

src/styles/default.scss

@@ -2,91 +2,91 @@
    background-color: aliceblue;
 }
 
-html,
+// html,
-body,
+// body,
-div,
+// div,
-span,
+// span,
-applet,
+// applet,
-object,
+// object,
-iframe,
+// iframe,
-h1,
+// h1,
-h2,
+// h2,
-h3,
+// h3,
-h4,
+// h4,
-h5,
+// h5,
-h6,
+// h6,
-p,
+// p,
-blockquote,
+// blockquote,
-pre,
+// pre,
-a,
+// a,
-abbr,
+// abbr,
-acronym,
+// acronym,
-address,
+// address,
-big,
+// big,
-cite,
+// cite,
-code,
+// code,
-del,
+// del,
-dfn,
+// dfn,
-em,
+// em,
-img,
+// img,
-ins,
+// ins,
-kbd,
+// kbd,
-q,
+// q,
-s,
+// s,
-samp,
+// samp,
-small,
+// small,
-strike,
+// strike,
-strong,
+// strong,
-sub,
+// sub,
-sup,
+// sup,
-tt,
+// tt,
-var,
+// var,
-b,
+// b,
-u,
+// u,
-i,
+// i,
-center,
+// center,
-dl,
+// dl,
-dt,
+// dt,
-dd,
+// dd,
-ol,
+// ol,
-ul,
+// ul,
-li,
+// li,
-fieldset,
+// fieldset,
-form,
+// form,
-label,
+// label,
-legend,
+// legend,
-table,
+// table,
-caption,
+// caption,
-tbody,
+// tbody,
-tfoot,
+// tfoot,
-thead,
+// thead,
-tr,
+// tr,
-th,
+// th,
-td,
+// td,
-article,
+// article,
-aside,
+// aside,
-canvas,
+// canvas,
-details,
+// details,
-embed,
+// embed,
-figure,
+// figure,
-figcaption,
+// figcaption,
-footer,
+// footer,
-header,
+// header,
-hgroup,
+// hgroup,
-menu,
+// menu,
-nav,
+// nav,
-output,
+// output,
-ruby,
+// ruby,
-section,
+// section,
-summary,
+// summary,
-time,
+// time,
-mark,
+// mark,
-audio,
+// audio,
-video {
+// video {
-   margin: 0;
+//    margin: 0;
-   padding: 0;
+//    padding: 0;
-   border: 0;
+//    border: 0;
-   font-size: 100%;
+//    font-size: 100%;
-   vertical-align: baseline;
+//    vertical-align: baseline;
-   box-sizing: border-box;
+//    box-sizing: border-box;
-}
+// }