程序员的资源宝库

网站首页 > gitee 正文

vue3使用v-md-editor锚点

sanyeah 2024-04-09 19:57:26 gitee 5 ℃ 0 评论

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>

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表