feat: Nuclide Library增加键盘定位左侧核素功能

src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null">
+  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null" @cancel="handleClose">
     <a-spin :spinning="isLoading">
       <div class="nuclide-library">
-        <div class="nuclide-library-list">
+        <div ref="containerRef" class="nuclide-library-list">
           <div
             class="nuclide-library-list-item"
             :class="{ active: selectedNuclide == item }"
@@ -113,7 +113,6 @@ import ModalMixin from '@/mixins/ModalMixin'
 import TitleOverBorder from '../TitleOverBorder.vue'
 import { getAction } from '@/api/manage'
 import SampleDataMixin from '../../SampleDataMixin'
-import { toFixed } from '@/utils/number'
 
 // 右上角表格配置
 const daughterColumns = [
@@ -233,6 +232,9 @@ export default {
           if (selectFirst) {
             this.selectedNuclide = nuclides[0]
             this.model.nuclideName = nuclides[0]
+            this.$nextTick(() => {
+              this.scrollToView(this.selectedNuclide)
+            })
           }
         } else {
           this.$message.error(message)
@@ -252,7 +254,36 @@ export default {
         nuclideName: '',
       }
       this.getInfo(true)
+      window.addEventListener('keyup', this.handleKeyUp)
     },
+
+    // 键盘按键抬起，定位到首字母为该键的核素
+    handleKeyUp({ key }) {
+      if (/[a-zA-Z]/.test(key)) {
+        const list = this.nuclideList.filter((item) => item.toLowerCase().startsWith(key))
+        if (list.length) {
+          const firstItem = list[0]
+          this.handleNuclideItemClick(firstItem)
+          this.scrollToView(firstItem)
+        }
+      }
+    },
+
+    // 左侧列表中的目标核素滚动到可视范围
+    scrollToView(targetItem) {
+      const index = this.nuclideList.findIndex((item) => item == targetItem)
+      if (-1 !== index) {
+        const targetEle = this.$refs.containerRef.querySelector(`div:nth-child(${index + 1})`)
+        if (targetEle.scrollIntoViewIfNeeded) {
+          targetEle.scrollIntoViewIfNeeded()
+        }
+        // firefox兼容
+        else {
+          targetEle.scrollIntoView()
+        }
+      }
+    },
+
     handleNuclideItemClick(item) {
       this.selectedNuclide = item
       this.model.nuclideName = item
@@ -282,6 +313,11 @@ export default {
       this.getInfo(true)
     },
 
+    // 关闭
+    handleClose() {
+      window.removeEventListener('keyup', this.handleKeyUp)
+    },
+
     handleParentClick(item) {
       this.selectedParent = item
     },

src/views/spectrumAnalysis/components/Modals/SelfStation/SelfStationNuclideLibraryModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null">
+  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null" @cancel="handleClose">
     <a-spin :spinning="isLoading">
       <div class="nuclide-library">
-        <div class="nuclide-library-list">
+        <div ref="containerRef" class="nuclide-library-list">
           <div
             class="nuclide-library-list-item"
             :class="{ active: selectedNuclide == item }"
@@ -232,6 +232,9 @@ export default {
           if (selectFirst) {
             this.selectedNuclide = nuclides[0]
             this.model.nuclideName = nuclides[0]
+            this.$nextTick(() => {
+              this.scrollToView(this.selectedNuclide)
+            })
           }
         } else {
           this.$message.error(message)
@@ -252,7 +255,36 @@ export default {
       }
       this.getInfo(true)
       this.visible = true
+      window.addEventListener('keyup', this.handleKeyUp)
     },
+
+    // 键盘按键抬起，定位到首字母为该键的核素
+    handleKeyUp({ key }) {
+      if (/[a-zA-Z]/.test(key)) {
+        const list = this.nuclideList.filter((item) => item.toLowerCase().startsWith(key))
+        if (list.length) {
+          const firstItem = list[0]
+          this.handleNuclideItemClick(firstItem)
+          this.scrollToView(firstItem)
+        }
+      }
+    },
+
+    // 左侧列表中的目标核素滚动到可视范围
+    scrollToView(targetItem) {
+      const index = this.nuclideList.findIndex((item) => item == targetItem)
+      if (-1 !== index) {
+        const targetEle = this.$refs.containerRef.querySelector(`div:nth-child(${index + 1})`)
+        if (targetEle.scrollIntoViewIfNeeded) {
+          targetEle.scrollIntoViewIfNeeded()
+        }
+        // firefox兼容
+        else {
+          targetEle.scrollIntoView()
+        }
+      }
+    },
+
     handleNuclideItemClick(item) {
       this.selectedNuclide = item
       this.model.nuclideName = item
@@ -282,6 +314,11 @@ export default {
       this.getInfo(true)
     },
 
+    // 关闭
+    handleClose() {
+      window.removeEventListener('keyup', this.handleKeyUp)
+    },
+
     handleParentClick(item) {
       this.selectedParent = item
     },