如果帮助文档可以加载组件，那么在介绍的同时就可以运行演示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. 如何清除项目git版本控制信息

    首先进入项目目录下 邮件打开 git bash here 执行命令 find . -name ".git" | xargs rm -rf 就清除了git版本控制信息

  2. redis lua脚本学习

    语法格式(常见) a = 5 -- 全局变量 local b = 5 -- 局部变量 Eval的使用 EVAL script numkeys key [key ...] arg [arg ...] 首 ...

  3. Docker Harbor私有仓库部署与管理 (超详细配图)

    Docker Harbor私有仓库部署与管理 1.Harbor 介绍 2.Harbor部署 3.Harbor管理 1.Harbor 介绍: 什么是 Harbor ? Harbor 是 VMware 公 ...

  4. MLlib学习——基本数据类型

    数据类型--基于RDD的API 本地矢量 标记点 本地矩阵 分布式矩阵 RowMatrix(行矩阵) IndexedRowMatrix(索引行矩阵) CoordinateMatrix(坐标矩阵) Bl ...

  5. mock测试出现Circular view path [trade_records]: would dispatch back to the current handler URL

    这是因为你的Controller中返回的视图名称与你当前的requestMapping名称一样,这并没有很好的解决方案,除非你改掉其中一个名字. 因为springframework test时你并没有 ...

  6. sqli-labs 1-22关

    Page-1(Basic Challenges) Less 1-4 Less-(1-4)是最常规的SQL查询,分别采用单引号闭合.无引号.括号单引号闭合.括号双引号闭合,没有过滤:可以采用and '1 ...

  7. Solution -「JSOI 2019」「洛谷 P5334」节日庆典

    \(\mathscr{Description}\)   Link.   给定字符串 \(S\),求 \(S\) 的每个前缀的最小表示法起始下标(若有多个,取最小的).   \(|S|\le3\time ...

  8. 使用 Spring Cloud Jaeger 进行分布式跟踪

    在本文中,学习如何实现 Jaeger(基于 OpenTracing 和 Spring Boot 应用程序)以及如何使用 Jaeger UI 可视化跟踪. 介绍 在本文中,我们将探讨如何使用 Jaege ...

  9. 已经安装的nginx增加额外配置步骤

    这里以安装第三方ngx_http_google_filter_module模块为例nginx的模块是需要重新编译nginx,而不是像apache一样配置文件引用.so1. 下载第三方扩展模块ngx_h ...

  10. 使用helm安装ingress，实现用域名的方式访问k8s内部应用

    k8s集群版本 k8s集群版本是1.22 提前部署好nginx服务和创建好svc deployment方式部署的nginx服务,1个副本 创建的服务 通过服务可以代理到nginx服务 curl 10. ...