wol/AgileBoot-Front-End-Basic
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: 升级element-plus，修复输入框无法高亮选中的问题

Browse Source
This commit is contained in:
valarchie 2023-02-05 12:01:01 +08:00
parent 5d9b8b23d7
commit 64688a5da0
2 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -20,7 +20,7 @@
"@vueuse/core": "^9.3.0", "@vueuse/core": "^9.3.0",
"axios": "0.26.1", "axios": "0.26.1",
"echarts": "5.3.2", "echarts": "5.3.2",
"element-plus": "2.2.20", "element-plus": "2.2.29",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"fuse.js": "6.5.3", "fuse.js": "6.5.3",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",

56
src/layout/components/TagsView/ScrollPane.vue
View File

@ -10,54 +10,56 @@
</template> </template>
<script setup> <script setup>
import { useStore } from 'vuex';
const tagAndTagSpacing = ref(4); const tagAndTagSpacing = ref(4);
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap$); const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef);
onMounted(() => { onMounted(() => {
scrollWrapper.value.addEventListener('scroll', emitScroll, true); scrollWrapper.value.addEventListener('scroll', emitScroll, true)
}); })
onBeforeUnmount(() => { onBeforeUnmount(() => {
scrollWrapper.value.removeEventListener('scroll', emitScroll); scrollWrapper.value.removeEventListener('scroll', emitScroll)
}); })
function handleScroll(e) { function handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40; const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = scrollWrapper.value; const $scrollWrapper = scrollWrapper.value;
$scrollWrapper.scrollLeft += eventDelta / 4; $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
} }
const emits = defineEmits(); const emits = defineEmits()
const emitScroll = () => { const emitScroll = () => {
emits('scroll'); emits('scroll')
}; }
const store = useStore(); const store = useStore();
const visitedViews = computed(() => store.state.tagsView.visitedViews); const visitedViews = computed(() => store.state.tagsView.visitedViews);
function moveToTarget(currentTag) { function moveToTarget(currentTag) {
const $container = proxy.$refs.scrollContainer.$el; const $container = proxy.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth; const $containerWidth = $container.offsetWidth
const $scrollWrapper = scrollWrapper.value; const $scrollWrapper = scrollWrapper.value;
let firstTag = null; let firstTag = null
let lastTag = null; let lastTag = null
// find first tag and last tag // find first tag and last tag
if (visitedViews.value.length > 0) { if (visitedViews.value.length > 0) {
firstTag = visitedViews.value[0]; firstTag = visitedViews.value[0]
lastTag = visitedViews.value[visitedViews.value.length - 1]; lastTag = visitedViews.value[visitedViews.value.length - 1]
} }
if (firstTag === currentTag) { if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0; $scrollWrapper.scrollLeft = 0
} else if (lastTag === currentTag) { } else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth; $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else { } else {
const tagListDom = document.getElementsByClassName('tags-view-item'); const tagListDom = document.getElementsByClassName('tags-view-item');
const currentIndex = visitedViews.value.findIndex((item) => item === currentTag); const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
let prevTag = null; let prevTag = null
let nextTag = null; let nextTag = null
for (const k in tagListDom) { for (const k in tagListDom) {
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) { if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) { if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
@ -70,21 +72,21 @@ function moveToTarget(currentTag) {
} }
// the tag's offsetLeft after of nextTag // the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value; const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
// the tag's offsetLeft before of prevTag // the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value; const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth; $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft; $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
} }
} }
} }
defineExpose({ defineExpose({
moveToTarget, moveToTarget,
}); })
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@ -100,4 +102,4 @@ defineExpose({
height: 49px; height: 49px;
} }
} }
</style> </style>