VueHook Plus

简体中文
English

简体中文
English

Appearance

Return to top
On this page

usePreview

注意

由于使用频率低和依赖的安全性，v1.7.2 已弃用。以下给予封装思路。

用于预览 md 和 vue 组件视图的 hook

源码展示 

import { marked } from 'marked'
import { Ref, computed, unref, ref, watchEffect, createApp, VueElement } from 'vue'

export default function usePreview(
  md: Parameters<typeof createApp> | Ref<string> | string | VueElement,
) {
  const container = ref<Element>()
  const mdCompute = computed(() => unref(md))

  watchEffect(onInvalidate => {
    if (mdCompute.value && container.value) {
      try {
        if (typeof mdCompute.value === 'string') {
          const html = marked.parse(mdCompute.value)
          if (html) container.value.innerHTML = html
        } else {
          const app = createApp(mdCompute.value)
          app.mount(container.value)
        }
      } catch (error) {
        console.log(error)
      }
    }

    onInvalidate(() => {
      if (container.value) container.value.innerHTML = ''
    })
  })

  return {
    container,
  }
}

import { marked } from 'marked'
import { Ref, computed, unref, ref, watchEffect, createApp, VueElement } from 'vue'

export default function usePreview(
  md: Parameters<typeof createApp> | Ref<string> | string | VueElement,
) {
  const container = ref<Element>()
  const mdCompute = computed(() => unref(md))

  watchEffect(onInvalidate => {
    if (mdCompute.value && container.value) {
      try {
        if (typeof mdCompute.value === 'string') {
          const html = marked.parse(mdCompute.value)
          if (html) container.value.innerHTML = html
        } else {
          const app = createApp(mdCompute.value)
          app.mount(container.value)
        }
      } catch (error) {
        console.log(error)
      }
    }

    onInvalidate(() => {
      if (container.value) container.value.innerHTML = ''
    })
  })

  return {
    container,
  }
}

API 

const { container } = usePreview(target)

const { container } = usePreview(target)

Params

参数说明类型
targetDOM 节点或者 RefVueComponent | string | JSX.Element

Result

参数说明类型
containerDOM 节点或者 RefElement | () => Element | JSX.Element

Source

源码 • 文档 • 示例