vue3使用v-md-editor锚点

vue3使用v-md-editor锚点

预览模式展示了如何在预览模式下通过外部锚点来定位到文档标题位置。

官网示例

https://ckang1229.gitee.io/vue-markdown-editor/zh/senior/anchor.html

xxx.vue

<template>
  <a-back-top :visibilityHeight="200" />
  <div>
    <div class="main">
      <a-page-header :title="articleForm.title" />
      <v-md-preview :text="articleForm.content" ref="preview"></v-md-preview>
    </div>

    <div class="anchor">
      <div class="anchor-tag" v-for="anchor in state.titleData" :key="anchor" @click="handleAnchorClick(anchor)">
        {{ anchor.title }}
      </div>
    </div>
  </div>
</template>

script setup

<script lang="ts" setup>
import { articleForm } from '@/api/http/data/model/artileModel'
import { article } from '@/api/http/index'
import { getCurrentInstance } from 'vue'
const route = useRoute()
const state: any = reactive({
  id: route.query.id,
  titleData: []
})

const { proxy }: any = getCurrentInstance()
const preview: any = ref()
function handleAnchorClick(anchor: any) {
  const { lineIndex } = anchor
  const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`)
  if (heading) {
    preview.value.scrollToTarget({
      target: heading,
      scrollContainer: window,
      top: 60
    })
  }
}
onMounted(async () => {
  await article.GetById(state.id).then(res => {
    articleForm.content = res.data.data.content
    articleForm.title = res.data.data.title
  })

  const anchors = proxy.$refs.preview.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
  // console.log('%c [ anchors ]-35', 'font-size:13px; background:pink; color:#bf2c9f;', anchors)
  const title = Array.from(anchors).filter((title: any) => {
    return !!title.innerText.trim()
  })
  if (!title.length) {
    state.titleData = []
    return
  }
  const hTags = Array.from(
    new Set(
      title.map((title: any) => {
        return title.tagName
      })
    )
  ).sort()
  state.titleData = title.map((el: any) => {
    return {
      title: el.innerText,
      lineIndex: el.getAttribute('data-v-md-line'),
      indent: hTags.indexOf(el.tagName)
    }
  })
})
</script>