如果帮助文档可以加载组件，那么在介绍的同时就可以运行演示demo，是不是很酷？

如果可以在线修改运行代码，那么是不是更容易理解？

上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能，这里介绍一下关于代码方面的功能。

源码和演示

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

<Teleport :to="'#' + item.id" :disabled="moveDisabled">

    <el-card class="box-card">

        <template #header>

          <div class="card-header">

            <span>

              {{item.title}} &nbsp; &nbsp;

            </span>

          </div>

        </template>

        <component

          :is="$state.comp[item.key]"

          v-bind="item.props"

        >

        </component>

    </el-card>

</Teleport>

好吧，其实只需要使用 component 来加载，el-card 是为了外观不是太难看，Teleport 是为了可以“穿越”的文档的指定位置。

组件定位

如果组件只能在文档末尾加载，那么不是太好看，所以还需要一个“定位”功能，在文档里面指定加载位置。

我们可以直接在 md 格式的文档里面加一个div，设置属性即可：

<div

  id="test2"

  data-key="testComponent"

  data-props='{"msg":"div设置的属性"}'

  data-title="加载组件的测试"

>

  加载中

</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。

    <iframe :src="src" style="width:100%;height:100%"></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 = ref('')

      // 用 Window 传递代码

      if (!window.__code) {

        window.__code = {}

      }

      // 重新加载代码

      watch(() => props.reload, () => {

        const id = props.code.id

        window.__code[id] = props.code

        src.value = `${config.baseUrl}runcode/index.html?id=${id}&rnd=${new Date().valueOf()}`

      }, {immediate: true})

      return {

        src

      }

    }

  })

运行代码

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

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <link rel="icon" href="/nfwt.ico" />

    <link href="https://unpkg.com/element-plus@1.2.0-beta.3/dist/index.css" rel="stylesheet"/>

    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>

    <script src="https://unpkg.com/element-plus@2.1.4/dist/index.full.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>运行代码</title>

  </head>

  <body>

    <div id="app"></div>

    <script >

      // 使用 eval编译js代码的模板

      const mysetup = `

        (function setup (props, ctx) {

          {{code}}

        })

      `

      // 接收参数

      const search = decodeURI(window.location.search)

      const id = search.split('&')[0].replace('?id=','')

      const code = top.window.__code[id]

      const temp = code.template

      const {

        defineComponent,

        defineAsyncComponent,

        ref,

        reactive,

        // 其他需要演示的功能

        nextTick

      } = Vue

      const App = {

        template: temp, // 设置模板

        setup (_props, _ctx) {

          const tmpJs = code.js // 获取js代码

          let fun = null // 转换后的函数

          try {

            if (tmpJs)

              fun = eval(mysetup.replace('{{code}}', tmpJs)) // 用 eval 把 字符串 变成js代码

          } catch (error) {

            console.error('转换出现异常：', error)

          }

          const re = typeof fun === 'function' ? fun : () => {}

          return {

            ...re(_props, _ctx) // 运行函数，解构返回对象

          }

        }

      }

      const app = Vue.createApp(App)

      // 挂载需要的第三方插件。

      app.use(ElementPlus).mount("#app")

    </script>

  </body>

</html>

这样我们就可以愉快的在线写代码了。

查看效果

https://nfpress.gitee.io/nf-press-edit/1010/18_runcode

设置代码的方式

可以点右上角，切换为编辑模式，体验一下在线编写文档。好吧，有点简陋。

nf-Press —— 在线文档也可以加载组件和编写代码的更多相关文章

Android浏览本地 API文档 + 解决页面加载慢的问题
火狐浏览器安装离线浏览插件: 用浏览器打开index.html文件,你会发现加载的很慢,原因你懂的,为此,我们可以通过离线的方式查看本地API文档,用火狐浏览器 + Work Offline插 ...
Chrome设计文档-多进程资源加载
原文:Multi-process Resource Loading 背景浏览器主进程及browser process处理所有的网络通信.原因有三点: Browser process可以控制每一个re ...
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...
vs2010 单文档MFC 通过加载位图文件作为客户区背景
实现效果: 这个其实是一个非常常见的功能,大家都会考虑给自己简单的工程做一个背景界面.其实只要在view类中重载OnEraseBkgnd()这个函数就好了. 代码如下: BOOL CdddView:: ...
C# 加载xml文档文件及加载xml字符串
//创建XmlDocument对象 XmlDocument xmlDoc = new XmlDocument(); //载入xml文件名 xmlDoc.Load(filename); //如果是xml ...
在线文档预览方案-office web apps续篇
上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...
jQuery实现在线文档
1.1.1 摘要现在,许多网站都提供在线图片和图书阅读的功能,这种方式比下载后阅读来的直观和人性化,要实现该功能涉及到点击处理和图片动态加载. 在接下来的博文中,我们将通过Javascript方式实 ...
在线文档预览方案-office web apps
最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...
[转载]在线文档预览方案-Office Web Apps
最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

随机推荐

Java线程--Exchanger使用
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11868576.html Java线程--Exchanger使用: Exchanger 是用来交 ...
Docker的数据管理（上）
Docker的数据管理(上) 1.管理docker容器中数据 2.容器互联(使用centos镜像) 1.管理docker容器中数据: 管理Docker 容器中数据主要有两种方式:数据卷(Data Vo ...
rpm与yum安装及管理程序
安装及管理程序 1.Linux应用程序基础 2.RPM软件包管理工具 3.yum源仓库创建 1.应用程序与系统命令的关系如图: 典型应用程序的目录结构如图: 常见的软件包封装类型如图: 2.RPM包 ...
04 js
js 1. JavaScript概述 JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但 ...
「Python实用秘技05」在Python中妙用短路机制
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第5期 ...
.NET 云原生架构师训练营（权限系统系统演示 EntityAccess）--学习笔记
目录模块拆分 EntityAccess 模块拆分 EntityAccess 实体权限属性权限实体权限创建 student https://localhost:7018/Student/dotn ...
k8s-ingress增加跨域问题
第一种: kubectl get ingresses. -n rrzhibo-admin test-rrzb-apiadmin-gateway-http-ingress -o yaml apiVers ...
【计理01组08号】SSM框架整合
[计理01组08号]SSM框架整合数据库准备本次课程使用 MySQL 数据库.首先启动 mysql : sudo service mysql start 然后在终端下输入以下命令,进入到 MySQ ...
单网口RFC2544测试——信而泰网络测试仪实操
一.测试拓扑拓扑说明测试仪一个端口和DUT一个端口相连 DUT假设是一台交换设备,它能够把测试仪发送的流量直接转发回来注意:要求DUT必须能够把收到的流量环回出来,否则没有办法测试二.测试思路 ...
实力再获认可！Smartbi入选爱分析·产业数字化厂商全景报告
近日,中国独立的第三方产业数字化研究与咨询机构--爱分析发布<2021爱分析·产业数字化厂商全景报告>.思迈特软件凭借优秀的解决方案能力及丰富的业务实践经验,入选报告中银行数字化.保险数字 ...

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