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

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

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

源码和演示

https://gitee.com/nfpress/nf-press-edit

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 —— 在线文档也可以加载组件和编写代码的更多相关文章

  1. Android浏览本地 API文档 + 解决页面加载慢的问题

    火狐浏览器安装离线浏览插件: 用浏览器打开index.html文件,你会发现加载的很慢,原因你懂的,为此,我们可以通过离线的方式 查看本地API文档,用火狐浏览器  +   Work Offline插 ...

  2. Chrome设计文档-多进程资源加载

    原文:Multi-process Resource Loading 背景 浏览器主进程及browser process处理所有的网络通信.原因有三点: Browser process可以控制每一个re ...

  3. 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

    <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...

  4. vs2010 单文档MFC 通过加载位图文件作为客户区背景

    实现效果: 这个其实是一个非常常见的功能,大家都会考虑给自己简单的工程做一个背景界面.其实只要在view类中重载OnEraseBkgnd()这个函数就好了. 代码如下: BOOL CdddView:: ...

  5. C# 加载xml文档文件及加载xml字符串

    //创建XmlDocument对象 XmlDocument xmlDoc = new XmlDocument(); //载入xml文件名 xmlDoc.Load(filename); //如果是xml ...

  6. 在线文档预览方案-office web apps续篇

    上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...

  7. jQuery实现在线文档

    1.1.1 摘要 现在,许多网站都提供在线图片和图书阅读的功能,这种方式比下载后阅读来的直观和人性化,要实现该功能涉及到点击处理和图片动态加载. 在接下来的博文中,我们将通过Javascript方式实 ...

  8. 在线文档预览方案-office web apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  9. [转载]在线文档预览方案-Office Web Apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

随机推荐

  1. jqGrid 修改单元格值或者替换图片及其他

     var rowIds = jQuery("#list1").jqGrid('getDataIDs');                for (var k = 0; k < ...

  2. 关于Miller-Rabin与Pollard-Rho算法的理解（素性测试与质因数分解）

    前置 费马小定理(即若P为质数,则\(A^P\equiv A \pmod{P}\)). 欧几里得算法(GCD). 快速幂,龟速乘. 素性测试 引入 素性测试是OI中一个十分重要的事,在数学毒瘤题中有着 ...

  3. 实现redis哨兵，模拟master故障场景

    由于主从架构无法实现master和slave角色的自动切换,所以在发送master节点宕机时,redis主从复制无法实现自动的故障转移,即将slave 自动提升为新的master.因此,需要配置哨兵来 ...

  4. iOS 如何监听用户在手机设置里改变了系统的时间？

    如何监听用户未退出APP但通过Home键在手机设置里改变了系统的时间? 用户虽未退出APP,但是当它按Home键退到后台时 ,会调用该方法: - (void)applicationDidEnterBa ...

  5. jquery-easyui环境的搭建及测试

    对于软件开发者来说,一个良好的前端框架不仅能够使页面优美可观而且还能够大大的提高开发效率.提高系统整体界面的美观,框架将常用的功能封装完成,减少工作量.前端框架目前也比较多,小编本次主要介绍下easy ...

  6. SpringBoot自动配置的魔法

    Spring自动配置 从@SpringBootApplication注解说起 SpringBoot会根据类路径下的类自动配置,省去了编写繁琐的xml配置文件.原本基于xml配置bean的方式编程基于J ...

  7. 四路4 GSPS@ 12 bit,四路12 GSPS@16 位4T4R 射频芯片AD9988

    一.产品概述 AD9988 是一款高度集成的套件,是北京太速最新研发的,具有四个 16 位.12 GSPS 最大采样率.RF 数模转换器 (DAC) 内核,以及四个 12 位.4 GSPS 速率.RF ...

  8. Involuting Bunny! (2021.9)

      文化课就很掉头发,文科都能学好我还怕竞赛?(   大概从"刷的题的题解"推广为"所有做的题的题解"吧,兔子比较懒,这样写题解轻松一些.   Gym10305 ...

  9. Python基础（Day1）

    一.Python的简介  1.Python的诞生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发 ...

  10. 阿里云人脸1:N搜索开源版-Java版（文末附开源地址）

    ​ 一.人脸检测相关概念 人脸检测(Face Detection)是检测出图像中人脸所在位置的一项技术,是人脸智能分析应用的核心组成部分,也是最基础的部分.人脸检测方法现在多种多样,常用的技术或工具大 ...