2021-10-25 20:19:04 +08:00
|
|
|
<template>
|
2021-11-05 11:47:31 +08:00
|
|
|
<nav
|
|
|
|
v-outside="collapseToc"
|
|
|
|
class="one-toc"
|
|
|
|
:class="{ expanded }"
|
|
|
|
>
|
2021-10-25 20:19:04 +08:00
|
|
|
<veui-anchor
|
2021-10-28 17:03:43 +08:00
|
|
|
ui="s"
|
2021-10-28 19:33:38 +08:00
|
|
|
target-offset="120px"
|
2021-10-28 17:03:43 +08:00
|
|
|
:items="flattenItems"
|
2021-10-25 20:19:04 +08:00
|
|
|
/>
|
2021-11-05 11:47:31 +08:00
|
|
|
<div
|
|
|
|
class="toggle"
|
|
|
|
@click="toggleToc"
|
|
|
|
>
|
|
|
|
<veui-icon
|
|
|
|
class="collapsed-icon"
|
|
|
|
name="list-unordered"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-10-25 20:19:04 +08:00
|
|
|
</nav>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-11-05 11:47:31 +08:00
|
|
|
import { Anchor, Icon } from 'veui'
|
|
|
|
import outside from 'veui/directives/outside'
|
|
|
|
import 'veui-theme-dls-icons/list-unordered'
|
2021-10-25 20:19:04 +08:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'one-toc',
|
2021-11-05 11:47:31 +08:00
|
|
|
directives: {
|
|
|
|
outside
|
|
|
|
},
|
2021-10-25 20:19:04 +08:00
|
|
|
components: {
|
2021-11-05 11:47:31 +08:00
|
|
|
'veui-anchor': Anchor,
|
|
|
|
'veui-icon': Icon
|
2021-10-25 20:19:04 +08:00
|
|
|
},
|
|
|
|
props: {
|
2021-11-04 21:11:45 +08:00
|
|
|
items: {
|
|
|
|
type: Array,
|
|
|
|
default: () => []
|
|
|
|
}
|
2021-10-26 16:40:44 +08:00
|
|
|
},
|
2021-11-05 11:47:31 +08:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
expanded: false
|
|
|
|
}
|
|
|
|
},
|
2021-10-26 16:40:44 +08:00
|
|
|
computed: {
|
|
|
|
flattenItems () {
|
2021-11-05 11:47:31 +08:00
|
|
|
return this.items.flatMap(
|
|
|
|
({ children }) => (children || []).map(({ children, ...child }) => child) || []
|
|
|
|
)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggleToc () {
|
|
|
|
this.expanded = !this.expanded
|
|
|
|
},
|
|
|
|
collapseToc () {
|
|
|
|
if (this.expanded) {
|
|
|
|
this.expanded = false
|
|
|
|
}
|
2021-10-26 16:40:44 +08:00
|
|
|
}
|
2021-10-25 20:19:04 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
2021-11-05 11:47:31 +08:00
|
|
|
|
|
|
|
<style lang="stylus" scoped>
|
2021-11-05 12:42:57 +08:00
|
|
|
.toggle
|
|
|
|
display none
|
|
|
|
|
2021-11-05 11:47:31 +08:00
|
|
|
@media (max-width 480px)
|
|
|
|
.one-toc
|
|
|
|
background-color #fff
|
|
|
|
z-index 20
|
|
|
|
top 0
|
|
|
|
right 0
|
|
|
|
bottom 0
|
|
|
|
left auto
|
|
|
|
padding 40px 60px 40px 0
|
|
|
|
transition transform 0.3s
|
|
|
|
transform translateX(100%)
|
|
|
|
|
|
|
|
&::before
|
|
|
|
content ''
|
|
|
|
position absolute
|
|
|
|
top 0
|
|
|
|
bottom 0
|
|
|
|
left 0
|
|
|
|
width 1px
|
|
|
|
background-color #e2e6f0
|
|
|
|
|
|
|
|
&.expanded
|
|
|
|
transform translateX(0)
|
|
|
|
|
|
|
|
.toggle
|
|
|
|
z-index -1
|
|
|
|
display flex
|
|
|
|
align-items center
|
|
|
|
justify-content center
|
|
|
|
width 36px
|
|
|
|
height 36px
|
|
|
|
position absolute
|
|
|
|
top 80px
|
|
|
|
right 100%
|
|
|
|
border 1px solid #e2e6f0
|
|
|
|
border-top-left-radius 4px
|
|
|
|
border-bottom-left-radius 4px
|
|
|
|
background-color #fff
|
|
|
|
box-shadow 0 0 12px rgba(0, 0, 0, 0.1)
|
|
|
|
font-size 20px
|
|
|
|
transition transform 0.3s, opacity 0.3s
|
|
|
|
|
|
|
|
&::before
|
|
|
|
content ""
|
|
|
|
position absolute
|
|
|
|
top 0
|
|
|
|
bottom 0
|
|
|
|
right -19px
|
|
|
|
width 20px
|
|
|
|
background-color #fff
|
|
|
|
|
|
|
|
&.expanded .toggle
|
|
|
|
transform translateX(100%)
|
|
|
|
opacity 0
|
|
|
|
</style>
|