mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
25bebce59d
* feat(components): anchor component * fix(components): [anchor] marker opacity style * test(components): [anchor] update snapshots * fix(components): [anchor] style change and add version tag * docs(components): [anchor] affix mode demo add affix offset * fix(components): [anchor] change api * fix: slot name change * fix: scrollTo method change * fix: delete getCurrentAnchor api * style: text overflow * docs: change toc to anchor * refactor: useEventListener * fix: update * fix: update
77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-row>
|
|
<el-col :span="18">
|
|
<div
|
|
style="
|
|
height: 30px;
|
|
width: 70%;
|
|
background: #000;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
color: #fff;
|
|
"
|
|
>
|
|
Fixed Top Block
|
|
</div>
|
|
<div ref="containerRef" style="height: 300px; overflow-y: auto">
|
|
<div
|
|
id="part1"
|
|
style="
|
|
height: 300px;
|
|
background: rgba(255, 0, 0, 0.02);
|
|
margin-top: 30px;
|
|
"
|
|
>
|
|
part1
|
|
</div>
|
|
<div
|
|
id="part2"
|
|
style="
|
|
height: 300px;
|
|
background: rgba(0, 255, 0, 0.02);
|
|
margin-top: 30px;
|
|
"
|
|
>
|
|
part2
|
|
</div>
|
|
<div
|
|
id="part3"
|
|
style="
|
|
height: 300px;
|
|
background: rgba(0, 0, 255, 0.02);
|
|
margin-top: 30px;
|
|
"
|
|
>
|
|
part3
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-anchor
|
|
:container="containerRef"
|
|
direction="vertical"
|
|
type="defalut"
|
|
:offset="30"
|
|
@click="handleClick"
|
|
>
|
|
<el-anchor-link href="#part1" title="part1" />
|
|
<el-anchor-link href="#part2" title="part2" />
|
|
<el-anchor-link href="#part3" title="part3" />
|
|
</el-anchor>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const containerRef = ref<HTMLElement | null>(null)
|
|
|
|
const handleClick = (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
}
|
|
</script>
|