12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <template>
- <section ref="scrollabletoc">
- <ul>
- <li
- v-for="item in toc"
- :key="item.uuid"
- >
- <TocItem
- :item="item"
- :level="1"
- :editionid="$route.params.id"
- :loadedtextsuuids="loadedtextsuuids"
- @onClickTocItem="onClickTocItem"
- @onScrollToRef="onScrollToRef"
- />
- </li>
- </ul>
- </section>
- </template>
- <script>
- import TocItem from './TocItem'
- export default {
- name: 'EdToc',
- components: {
- TocItem
- },
- props: {
- toc: Array,
- loadedtextsuuids: Array
- },
- // watch: {
- // reftoscrollto: function (newref, oldref) {
- // console.log('TOC reftoscrollto watcher', oldref, newref)
- // this.scrollToRef()
- // }
- // },
- methods: {
- onScrollToRef (uuid) {
- // console.log('TOC scrollToRef', uuid, this.$refs)
- this.$scrollTo(`a[uuid="${uuid}"]`, 500, {
- container: this.$refs.scrollabletoc
- })
- },
- onClickTocItem (uuid) {
- this.$emit('onClickTocItem', uuid)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|