DesignMarkdown.vue

<template>
  <div style="width: 100%">
    <MarkDirTree :dirContent="dirContent"/>
    <VueMarkdown
      :source="content"
      :toc="true"
      v-highlight
      style="width: 100%; text-align: left"
    ></VueMarkdown>
  </div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
import MarkDirTree from './MarkDirTree'
export default {
    components: {VueMarkdown, MarkDirTree},
    name: 'DesignMarkdown',
    props: {
        contentSource: undefined
    },
    data () {
        return {
            content: '',
            dirContent: []
        }
    },
    watch: {
        contentSource: {
            handler (newVal) {
                this.content = newVal || ''
                this.getDirContent(newVal)
            },
            deep: true,
            immediate: true
        }
    },
    mounted () {
        console.log('design vuemarkdown')
    },
    methods: {
        // 树状目录
        getDirContent (mdContent) {
            if (!mdContent) {
                return []
            }
            const lineT = mdContent.split('\n')
            const titleArray = lineT.filter(item => item && item[0] === '#')
            console.log('titleArray', titleArray)
            const dirArray = titleArray.map(item => {
                return item.replace(/\r/g, '')
            })
            console.log('dirArray', dirArray)
            const dirLevelArray = dirArray.map(item => {
                let level = 0
                for (let loc in item) {
                    if (item[loc] === '#') {
                        ++level
                    }
                }
                const itemBack = item
                const value = itemBack.replace(/#/g, '').trim()
                return {
                    level,
                    value
                }
            })
            console.log('dirLevelArray', dirLevelArray)
            this.dirContent = dirLevelArray
        }
    }
}
</script>