docs_vue2/components/OneToc.vue

125 lines
2.1 KiB
Vue
Raw Normal View History

2021-10-25 20:19:04 +08:00
<template>
<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
/>
<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>
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',
directives: {
outside
},
2021-10-25 20:19:04 +08:00
components: {
'veui-anchor': Anchor,
'veui-icon': Icon
2021-10-25 20:19:04 +08:00
},
props: {
items: {
type: Array,
default: () => []
}
},
data () {
return {
expanded: false
}
},
computed: {
flattenItems () {
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-25 20:19:04 +08:00
}
}
</script>
<style lang="stylus" scoped>
@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>