nf-Press|nf-Press —— 在线文档也可以加载组件和编写代码 nf-Press——在线文档也可以加载

如果帮助文档可以加载组件，那么在介绍的同时就可以运行演示demo，是不是很酷？
如果可以在线修改运行代码，那么是不是更容易理解？

上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能，这里介绍一下关于代码方面的功能。
源码和演示 https://gitee.com/nfpress/nf-press-edit
【nf-Press|nf-Press —— 在线文档也可以加载组件和编写代码】https://nfpress.gitee.io/nf-press-edit/
加载组件、运行组件 Vue提供了一个可以动态加载组件的组件，component 和 defineAsyncComponent，我们可以用其实现我们想要的效果。
注册组件我们可以参考动态路由的设置方式来注册组件：

import { createRouter } from '/nf-press-edit'// 设置 axios 的 baseUrl const baseUrl = (document.location.host.includes('.gitee.io')) ? '/nf-press-edit/' :'/'export default createRouter({ baseUrl, components: { testComponent: () => import('../components/testCode.vue'), testComponent2: () => import('../components/testCode2.vue') } })

baseUrl：基础路由，比如要发布到 gitee.com 上，就需要根据情况设计第一级路径。
components：需要加载的组件集合，key-value形式，可以注册多个组件。

这里的“路由”，只需要定义需要加载的组件即可，文档的导航路由不需要设置。

存入全局状态 nf-press 会把注册的组件存入state，便于使用：

// 注册组件 if (info.components) { if (Object.keys(info.components).length > 0) { const { comp } = state for(let key in components) { comp[key] = defineAsyncComponent(components[key]) } } }

加载组件然后做一个组件来加载指定的组件

template

好吧，其实只需要使用 component 来加载，el-card 是为了外观不是太难看，Teleport 是为了可以“穿越”的文档的指定位置。
组件定位如果组件只能在文档末尾加载，那么不是太好看，所以还需要一个“定位”功能，在文档里面指定加载位置。
我们可以直接在 md 格式的文档里面加一个div，设置属性即可：

加载中

id：注册组件时对应的key，指定要加载的组件。
data-key：组件的key，要加载哪个组件。
data-props：组件需要的props属性，标准json格式。
data-title：组件上面显示的标题。
为什么用div？
因为还不会做 markdown-it 的插件。
为什么用 data-*？
因为只有 id 和 data-* 被保留，其他属性都被“吃掉”了。

这样在查看文档的时候，组件就会被加载到这个div里面。
看看效果

文章图片

在线编写代码、修改代码、运行代码我知道有很多第三方网站提供了完整的在线写代码的功能，一些官方文档也在用，但是总感觉有点“距离感”。因为需要点个连接打开新窗口，不知道大家有没有体验过。
对于一些简单的演示代码，还是觉得应该在一个页面内实现，所以自己做了一个简单的功能。
defineAsyncComponent 一开始用 script setup + defineAsyncComponent实现，在本地运行（开发模式）一切正常，但是发布后（生成环境）就出问题了，模板部分死活加载不上来。
改为 setup方式，不行，尝试其他方法也没有搞定。但是又不想放弃这个功能，最后只好用 CDN的方式来实现。
iframe + CDN 搞不定问题怎么办？绕过去吧。于是开启了古老的 iframe。

import { defineComponent, watch, ref } from 'vue'import config from '../config/index.js'export default defineComponent({ name: 'el-doc-runcode', inheritAttrs: false, props: { code: { type: Object, default: () => { return { id: 1, js: '', template: '', style: '' } } }, reload: Boolean }, setup (props) {const src = https://www.it610.com/article/ref('') // 用 Window 传递代码 if (!window.__code) { window.__code = {} }// 重新加载代码 watch(() => props.reload, () => { const id = props.code.id window.__code[id] = props.code src.value = https://www.it610.com/article/`${config.baseUrl}runcode/index.html?id=${id}&rnd=${new Date().valueOf()}` }, {immediate: true})return { src } } })

运行代码首先用CDN加载vue.js等需要的文件，然后设置 template 和代码即可。