2020-08-13 11:47:56 +08:00
|
|
|
|
<template>
|
|
|
|
|
<article class="anchor-demo">
|
|
|
|
|
<div class="line"/>
|
|
|
|
|
<div
|
|
|
|
|
ref="container"
|
|
|
|
|
class="anchor-wrapper"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="i in coffees"
|
|
|
|
|
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
|
|
|
|
|
:key="i.value"
|
|
|
|
|
class="block"
|
|
|
|
|
>
|
|
|
|
|
{{ i.label }}
|
|
|
|
|
</div>
|
|
|
|
|
<section class="anchor-two">
|
|
|
|
|
<veui-anchor
|
|
|
|
|
:items="coffees"
|
|
|
|
|
container="container"
|
|
|
|
|
/>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { Anchor } from 'veui'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
'veui-anchor': Anchor
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
coffees: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Infused',
|
2021-09-16 19:23:58 +08:00
|
|
|
|
value: '#infused2',
|
2020-08-13 11:47:56 +08:00
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Breadcrumb',
|
|
|
|
|
value: '/components/breadcrumb'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Boiled',
|
2021-09-16 19:23:58 +08:00
|
|
|
|
value: '#boiled2',
|
2020-08-13 11:47:56 +08:00
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Button',
|
|
|
|
|
value: '/components/button'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Espresso',
|
2021-09-16 19:23:58 +08:00
|
|
|
|
value: '#espresso2'
|
2020-08-13 11:47:56 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Milk coffee',
|
2021-09-16 19:23:58 +08:00
|
|
|
|
value: '#milk-coffee2'
|
2020-08-13 11:47:56 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2021-09-15 20:03:51 +08:00
|
|
|
|
<style lang="less" scoped>
|
2020-08-13 11:47:56 +08:00
|
|
|
|
.anchor-demo {
|
|
|
|
|
position: relative;
|
2021-09-15 20:03:51 +08:00
|
|
|
|
|
2020-08-13 11:47:56 +08:00
|
|
|
|
.anchor-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 300px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
border: 1px dashed;
|
|
|
|
|
|
|
|
|
|
& > section {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.block {
|
|
|
|
|
white-space: nowrap;
|
2021-09-16 19:23:58 +08:00
|
|
|
|
border-top: 1px solid #000;
|
2020-08-13 11:47:56 +08:00
|
|
|
|
width: 100px;
|
|
|
|
|
height: 150px;
|
|
|
|
|
flex: none;
|
2021-09-15 20:03:51 +08:00
|
|
|
|
|
2020-08-13 11:47:56 +08:00
|
|
|
|
& + .block {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.anchor-one {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 250px;
|
|
|
|
|
top: 50px;
|
|
|
|
|
}
|
2021-09-15 20:03:51 +08:00
|
|
|
|
|
2020-08-13 11:47:56 +08:00
|
|
|
|
.anchor-two {
|
|
|
|
|
position: absolute;
|
2021-09-16 19:23:58 +08:00
|
|
|
|
left: 250px;
|
2020-08-13 11:47:56 +08:00
|
|
|
|
top: 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<docs>
|
2021-09-16 19:23:58 +08:00
|
|
|
|
虚线框标记容器,实线标记锚点项顶部,当二者重合触发激活。
|
2020-08-13 11:47:56 +08:00
|
|
|
|
</docs>
|