fix: 修正搜索页面相关问题路由跳转逻辑
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m56s
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m56s
- 当用户点击问题条目时,生成一个带有query的url: faq?focus=[slug]自动展开faq页面中的对应词条
This commit is contained in:
@ -128,6 +128,10 @@
|
||||
return localePath({ path: `/download/${slug}` });
|
||||
}
|
||||
|
||||
if (item.type === 'question') {
|
||||
return localePath({ path: `/support/faq`, query: { focus: slug } });
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div class="question-list">
|
||||
<el-collapse class="question-collapse" accordion>
|
||||
<el-collapse v-model="activeNames" class="question-collapse">
|
||||
<el-collapse-item
|
||||
v-for="question in questions"
|
||||
:id="`q-${question.id}`"
|
||||
:key="question.id"
|
||||
:title="question.title"
|
||||
:name="question.id"
|
||||
@ -14,12 +15,38 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
questions: {
|
||||
type: Array as PropType<ProductQuestionView[]>,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const route = useRoute();
|
||||
|
||||
const activeNames = ref<(string | number)[]>([]);
|
||||
|
||||
// 当路由变化(包括初次挂载)时,检查是否需要聚焦
|
||||
watch(
|
||||
() => route.query.focus,
|
||||
async (focusId) => {
|
||||
if (!focusId) return;
|
||||
if (!import.meta.client) return;
|
||||
|
||||
// 确保渲染完成后再操作 DOM
|
||||
await nextTick();
|
||||
|
||||
const target = props.questions.find((q) => q.id === Number(focusId));
|
||||
if (!target) return;
|
||||
|
||||
// 展开目标项
|
||||
activeNames.value = [target.id];
|
||||
|
||||
// 平滑滚动到对应位置
|
||||
const el = document.querySelector(`#q-${target.id}`);
|
||||
el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user