Element-UI 弹窗内添加索引目录，点击跳到相应位置

冷不防 2022-11-06 13:59 343阅读 0赞

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

点击左侧索引菜单，使右侧内容跳转过去。如果用户滚动右侧内容，左侧菜单不随之滚动

--------------------

> 因为是在弹窗内部做实现，所以无法使用锚点实现；

# 1. 布局css #

// 字体等无关的样式代码省略了
    .container { // 外部容器
        overflow-y: auto;
        position: relative;
        $catalog-width: 132px;
        .container __catalog { // 左侧
            position: sticky;
            top: 0;
            .catalog-item {
                width: $catalog-width;
            }
        }
        .container __content { // 右侧
            margin-left: $catalog-width;
            position: absolute;
        }
    }

# 2. Template #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1][]

# 3. JS #

onJump(ev) {
                let currentTarget = ev.currentTarget;
                let target = ev.target;
                let refName = target.getAttribute("data-catalog");
                let container = this.$refs[refName];
                if(!container) return void 0;
                // 样式处理
                ...do somthing
                // 跳转
                let root = this.$refs["root"];
                root.scrollTop = container.offsetTop;
            }

> 这里没有实现滚动效果，仅仅实现了点击菜单，直接跳转到相应位置；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: /images/20221023/bd0e0df67bba481fac655cd87e34119d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1]: /images/20221023/eca10fbac238446aaadf8b69f8ecdbf7.png