xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Xu Zhimeng 2024-08-22 13:41:16 +08:00
parent b7972ecd56
commit 9ac572d92f
2 changed files with 78 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
View File

@ -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
},

41
src/views/spectrumAnalysis/components/Modals/SelfStation/SelfStationNuclideLibraryModal.vue
View File

@ -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
},