perf: 目录跳转

src/components/markdown/DesignMarkdown.vue

 <template>
-  <div>
+  <div style="width: 100%">
+    <MarkDirTree :dirContent="dirContent"/>
     <VueMarkdown
       :source="content"
+      :toc="true"
       v-highlight
       style="width: 100%; text-align: left"
     ></VueMarkdown>
@@ -9,27 +11,24 @@
 </template>
 <script>
 import VueMarkdown from 'vue-markdown'
+import MarkDirTree from './MarkDirTree'
 export default {
-    components: {VueMarkdown},
+    components: {VueMarkdown, MarkDirTree},
     name: 'DesignMarkdown',
     props: {
         contentSource: undefined
     },
     data () {
         return {
-            content: ''
-        }
-    },
-    computed: {
-        propsContent () {
-            console.log('this')
-            return this.contentSource
+            content: '',
+            dirContent: []
         }
     },
     watch: {
         contentSource: {
-            handler (newVal, oldVal) {
+            handler (newVal) {
                 this.content = newVal || ''
+                this.getDirContent(newVal)
             },
             deep: true,
             immediate: true
@@ -39,7 +38,35 @@ export default {
         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>

src/components/markdown/MarkDirTree.vue

+<template>
+  <div class="markdown-link">
+    <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>
+  </div>
+</template>
+<script>
+
+export default {
+    props: {
+        dirContent: undefined
+    },
+    data () {
+        return {
+            content: ''
+        }
+    },
+    watch: {
+        dirContent: {
+            handler (newVal) {
+                console.log('newVal', newVal)
+                this.content = newVal || ''
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    mounted () {
+        console.log('design vuemarkdown dir')
+    },
+    methods: {
+        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,.5);
+    float: right;
+    max-width: 400px;
+    padding:20px;
+    right:120px;
+    top:100px;
+    border-radius: 20px;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
+    transition: 2s;
+  }
+  .markdown-link:hover{
+    background: rgba(64, 158, 255,.9);
+  }
+  .link-title{
+    cursor: pointer;
+    color: #ffffff;
+  }
+  .link-title:hover{
+    color: #ff995e;
+  }
+</style>

src/main.js

@@ -4,7 +4,6 @@
 import Vue from 'vue'
 import axios from 'axios'
 import hljs from 'highlight.js'
-import * as echarts from 'echarts'
 import importElementComponents from './importElement'
 import importEchartsComponents from './importEchartsComponents'
 // 样式cnd
@@ -18,31 +17,32 @@ import App from './App'
 import 'highlight.js/styles/github.css'
 
 const env = process.env.NODE_ENV && false
+
+// 公共的部分
+
+Vue.use(cookies)
+
+Vue.use(hljs)
+Vue.directive('highlight', function (el) {
+    const blocks = el.querySelectorAll('pre code')
+    blocks.forEach((block) => {
+        hljs.highlightBlock(block)
+    })
+})
+// cookie
+Vue.prototype.$cookies = cookies
+// axios
+// Vue.use(axios)
+Vue.prototype.$axios = axios
+window.$axios_w = axios
+Vue.prototype.$cookies.set('user_session', 'null')
+// 路由
+const router = useRouter(Vue, VueRouter)
 // 生产环境
 if (env === 'production') {
     try {
-    // 路由
-        const router = useRouter(Vue, VueRouter)
-
+        // 全局引入
         Vue.config.productionTip = false
-        Vue.use(cookies)
-        Vue.use(hljs)
-        Vue.directive('highlight', function (el) {
-            const blocks = el.querySelectorAll('pre code')
-            blocks.forEach((block) => {
-                hljs.highlightBlock(block)
-            })
-        })
-        // cookie
-        Vue.prototype.$cookies = cookies
-        // axios
-        // Vue.use(axios)
-        Vue.prototype.$axios = axios
-        window.$axios_w = axios
-        Vue.prototype.$echarts = echarts
-        window.$echarts_w = echarts
-
-        Vue.prototype.$cookies.set('user_session', 'null')
 
         new Vue({
             el: '#app',
@@ -54,32 +54,13 @@ if (env === 'production') {
         throw Error(e)
     }
 } else {
-    // 路由
-    const router = useRouter(Vue, VueRouter)
-
     // 按需引入elementui
     importElementComponents(Vue)
 
     // 按需引入echarts
     importEchartsComponents(Vue)
-
     Vue.config.productionTip = false
-    Vue.use(cookies)
 
-    Vue.use(hljs)
-    Vue.directive('highlight', function (el) {
-        const blocks = el.querySelectorAll('pre code')
-        blocks.forEach((block) => {
-            hljs.highlightBlock(block)
-        })
-    })
-    // cookie
-    Vue.prototype.$cookies = cookies
-    // axios
-    // Vue.use(axios)
-    Vue.prototype.$axios = axios
-    window.$axios_w = axios
-    Vue.prototype.$cookies.set('user_session', 'null')
     new Vue({
         el: '#app',
         router,