MarkDirTree.vue

<template>
  <div class="markdown-link">
    <template  v-if="isExpand">
      <i class="el-icon-s-fold" @click="reverseExpand"  style="color:#ffffff;cursor: pointer;margin-bottom: 10px;float: right">&nbsp;隐藏目录</i>
      <div v-for="(item,index) in content" :key="index">
        <div>
          <template v-for="levelItem in item.level">
            &nbsp;
          </template>
          <span @click="jumpText(item)" class="link-title">{{item.value}}</span>
        </div>
      </div>
    </template>
    <i class="el-icon-s-unfold" v-else @click="reverseExpand"  style="color:#ffffff;cursor: pointer">&nbsp;显示目录</i>
  </div>
</template>
<script>

export default {
    props: {
        dirContent: undefined
    },
    data () {
        return {
            content: '',
            isExpand: true
        }
    },
    watch: {
        dirContent: {
            handler (newVal) {
                console.log('newVal', newVal)
                this.content = newVal || ''
            },
            deep: true,
            immediate: true
        }
    },
    mounted () {
        console.log('design vuemarkdown dir')
    },
    methods: {
        reverseExpand () {
            this.isExpand = !this.isExpand
        },
        jumpText (item) {
            const {level, value} = item
            console.log(level, value)
            this.herfTo(value)
        },
        herfTo (id) {
            const returnEle = document.querySelector('#' + id) // 获取跳转去的节点
            if (returnEle) {
                returnEle.scrollIntoView(true) // 让当前的元素滚动到浏览器窗口的可视区域内(true:对象的顶端与当前窗口的顶部对齐,false:对象的底端与当前窗口的底部对齐)
            }
        }
    }
}
</script>
<style>
  .markdown-link{
    position: fixed;
    background:rgba(64, 158, 255,.9);
    float: right;
    max-width: 400px;
    padding:20px;
    right:120px;
    top:75px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    transition: 2s;
  }
  .link-title{
    cursor: pointer;
    color: #ffffff;
  }
  .link-title:hover{
    color: #ff995e;
  }
</style>