vue实现文档浏览

Vue 实现文档浏览的方法

使用 vue-markdown-loader 解析 Markdown 文件

安装依赖：

npm install vue-markdown-loader markdown-it --save-dev

配置 webpack：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader',
        options: {
          preset: 'default',
          breaks: true,
          typographer: true
        }
      }
    ]
  }
}

组件中使用：

<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script>
import markdownContent from './document.md'

export default {
  computed: {
    compiledMarkdown() {
      return markdownContent
    }
  }
}
</script>

使用第三方库 vue-markdown

安装：

npm install vue-markdown

基本用法：

<template>
  <vue-markdown :source="markdownText"></vue-markdown>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      markdownText: '# Hello World\n\nThis is a markdown document.'
    }
  }
}
</script>

动态加载文档内容

通过 API 获取文档：

<template>
  <vue-markdown v-if="content" :source="content"></vue-markdown>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: { VueMarkdown },
  data() {
    return {
      content: null
    }
  },
  async mounted() {
    const response = await fetch('/api/document')
    this.content = await response.text()
  }
}
</script>

实现文档导航功能

创建文档导航组件：

<template>
  <div class="document-viewer">
    <div class="sidebar">
      <ul>
        <li v-for="item in toc" :key="item.id">
          <a :href="`#${item.id}`">{{ item.text }}</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <vue-markdown :source="content" @rendered="updateToc"></vue-markdown>
    </div>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: { VueMarkdown },
  data() {
    return {
      content: '',
      toc: []
    }
  },
  methods: {
    updateToc(renderer) {
      this.toc = renderer.getToc()
    }
  }
}
</script>

<style>
.document-viewer {
  display: flex;
}
.sidebar {
  width: 250px;
}
.content {
  flex: 1;
}
</style>

添加代码高亮支持

安装 highlight.js：

npm install highlight.js

配置代码高亮：

// main.js
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

Vue.directive('highlight', function(el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})

在组件中使用：

<template>
  <div v-highlight>
    <vue-markdown :source="content"></vue-markdown>
  </div>
</template>

实现文档搜索功能

添加搜索功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <vue-markdown :source="filteredContent"></vue-markdown>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: { VueMarkdown },
  data() {
    return {
      content: '',
      searchQuery: ''
    }
  },
  computed: {
    filteredContent() {
      if (!this.searchQuery) return this.content
      // 简单实现搜索高亮
      const regex = new RegExp(this.searchQuery, 'gi')
      return this.content.replace(regex, match => `==${match}==`)
    }
  }
}
</script>

实现文档版本切换

文档版本切换功能：

<template>
  <div>
    <select v-model="selectedVersion" @change="loadDocument">
      <option v-for="version in versions" :value="version" :key="version">
        {{ version }}
      </option>
    </select>
    <vue-markdown :source="content"></vue-markdown>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: { VueMarkdown },
  data() {
    return {
      versions: ['1.0', '2.0', '3.0'],
      selectedVersion: '1.0',
      content: ''
    }
  },
  methods: {
    async loadDocument() {
      const response = await fetch(`/docs/v${this.selectedVersion}.md`)
      this.content = await response.text()
    }
  },
  created() {
    this.loadDocument()
  }
}
</script>

这些方法提供了在 Vue 中实现文档浏览的基本功能，可以根据实际需求进行组合和扩展。