-
折叠面板:去网站复制代码到自己的文件官网
-
锚点:用菜单组件做布局
-
绑定
-
在菜单组件设置
:default-active="activeSection"写菜单组件里面 const activeSection = ref('1');定义
default-active
用于设置组件加载时哪个面板是展开状态。@select="handleSelect"
绑定事件
-
折叠面板设置
v-model="activeNames" 复制的都有这个 要定义哟 const activeNames = ref([]);
<el-collapse-item name="2" id="2" > 绑上id和name,锚点功能靠id,展开功能靠name
-
设置handleSelect
-
const handleSelect = (key) => { activeNames.value = [key]; }
实现点击锚点菜单展开
-
const handleSelect = (key) => { activeNames.value = [key];//展开 const element = document.getElementById(key);//获取是哪个面板 if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });//滚动 }
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
behavior: 'smooth'
:表示滚动将以平滑的方式进行,而不是瞬间跳转。block: 'nearest'
:如果目标元素已经在可视区域内,它将尽量只滚动到最近的位置,避免多余的滚动,除了这个还有center,start
-
-
-
锚点定位其他面板不关闭
- 到上一步已经实现功能了,但点击锚点之前打开的面板要关闭是因为activeNames.value = [key]只设置了一个key值
- 实现:
-
设置 添加activeNames.value的值
activeNames.value.push(key);
这里设置了就实现了,但效果不好
-
设置延时等待dom更新
- 原因:由于dom没更新导致锚点功能无法到理想的位置,需要再点击一下
- 解决:设置nextTick
nextTick
:这个函数会等待下一个 DOM 更新周期,确保在调用scrollIntoView
时元素的状态已经更新。import { nextTick } from 'vue'; const handleSelect = async (key) => { activeNames.value.push(key); // 展开面板 await nextTick(); // 等待 DOM 更新 const element = document.getElementById(key); // 获取元素 if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); // 滚动到该元素 } };
-
使用
setTimeout
: -
完整代码
-
import { nextTick } from 'vue'; const handleSelect = async (key) => { // 展开面板 activeNames.value.push(key); await nextTick(); // 等待 DOM 更新 const element = document.getElementById(key); // 获取元素 if (element) { // 添加一定的延迟,确保元素在 DOM 中可见 setTimeout(() => { element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100); // 100ms 的延迟 } };
-