nf-Press —— 在线文档也可以加载组件和编写代码
如果帮助文档可以加载组件，那么在介绍的同时就可以运行演示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}}
</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,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...
随机推荐
- Shell编程之循环语句与echo的用法
Shell编程之循环语句与echo的用法 目录 Shell编程之循环语句与echo的用法 一.echo用法 1. echo常用选项 2. 常用的转义字符 3. 特殊符号%.#的用法 二.循环语句 1. ...
- 【HDU6662】Acesrc and Travel(树型Dp)
题目链接 大意 给出一颗树,每个点上有一个权值\(A[i]\),有两个绝顶聪明的人甲和乙. 甲乙两人一起在树上轮流走,不能走之前经过的点.(甲乙时刻在一起) 甲先手,并可以确定起点.甲想要走过的点权之 ...
- Spark算子 - aggregateByKey
释义 aggregateByKey逻辑类似 aggregate,但 aggregateByKey针对的是PairRDD,即键值对 RDD,所以返回结果也是 PairRDD,结果形式为:(各个Key, ...
- 基于反熔丝FPGA、QSPI FLASH的高可靠程序存储、启动控制系统
1 涉及术语解释 1.1 三模冗余 三模冗余系统简称TMR(Triple Modular Redundancy),是最常用的一种容错设计技术．三个模块同时执行相同的操作,以多数相同的 ...
- Apache虚拟主机的搭建及相关问题解决
在开发的过程中,很多时候项目的部署都需要在本地进行虚拟服务器的模拟搭建,所以具体的配置流程为下,并且把自己遇到的问题跟大家分享. 1.Apache配置文件httpd.conf 找到 # Virtu ...
- SonarQube之采购选型参考
SonarQube是DevOps实践中主流的一款质量内建工具,过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具,比如pmd-cpd.checkstyle.findbugs ...
- [Java]Java入门笔记（一）：IDE设置、部分快捷键
一.Eclipse 软件设置 注意 同一时间,工作空间只能使用1个. 1.1 创建程序的步骤 创建项目Java Project 注意:项目名不要使用数字,也不要以数字开头: 选择"Use d ...
- Linux系列——常规基础操作
1.配置IP a.若安装桌面版系统,直接GUI画面配置,操作直观.简单 b.若安装非桌面版系统,进行如下配置: 1).ifconfig命令(临时配置,重启后失效) ifconfig eth ...
- kali安装python2、python3以及对应的pip
kali自带python2,python3python --version #查看python版本安装pipwget https://bootstrap.pypa.io/pip/2.7/get-pip ...
- kali系统语言设置
一.背景信息在安装完 kali linux 2020.1 时,其操作系统默认语言为英文的,我们操作起来比较麻烦,为了以后操作方便起见,这边将其操作系统默认语言更改为中文.本篇文章将带领各位小伙伴们一起 ...