classReplStore{// 序列化文件数据serialize() {return'#'+utoa(JSON.stringify(this.getFiles())) }// 获取文件数据getFiles() {constexported:Record<string,string> = {}for(constfilenameinthis.state.files) { exported[filename] =this.state.files[filename].code}returnexported } } 调用getFiles取出文...
项目选择检查(放在最前面)】:import router from './router' import { ElMessage } from 'element-plus' import NProgress from 'nprogress' import 'nprogress/nprogress.css' import { getToken } from '@/utils/auth' import { isHttp, isPathMatch } from '@/utils/validate' import { isRelogin...
error('Element not found'); return; } const canvas = await html2canvas(element, { scale: 2, // 提高分辨率 useCORS: true, }); const pdf = new jsPDF('p', 'mm', 'a4'); const imgData = canvas.toDataURL('image/jpeg'); const imgProps = pdf.getImageProperties(imgData); const pdf...
export class PreviewProxy { constructor(iframe: HTMLIFrameElement, handlers: Record<string, Function>) { this.iframe = iframe this.handlers = handlers this.pending_cmds = new Map() this.handle_event = (e) => this.handle_repl_message(e) window.addEventListener('message', this.handle_event, ...
export interface BaseElementNode extends Node { type: NodeTypes.ELEMENT // 类型 ns: Namespace // 命名空间 默认为 HTML,即 0 tag: string // 标签名 tagType: ElementTypes // 元素类型 isSelfClosing: boolean // 是否是自闭合标签 例如 props: Array<...
这个类很简单,除了保存文件名和文件内容外,主要是存储文件被编译后的内容,如果是js文件,编译后的内容保存在compiled.js上,css显然就是保存在compiled.css上,如果是vue单文件,那么script和template会编译成js保存到compiled.js上,样式则会提取到compiled.css上保存。
报错信息:Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. // 注意:配置成功后上传没问题了可能一样会报错, 报错信息:Access to video at 'http://www.xxxxx.com:13881/resource/financial/8DADA6F8576FE1232A466CBCD79C156...
modules, `document.getElementById('__sfc-styles').innerHTML = window.__css__` ] // 如果入口文件时Vue文件,那么添加挂载它的代码! if (mainFile.endsWith('.vue')) { codeToEval.push( `import { createApp } as _createApp } from "vue" const _mount = () => { const AppComponent =...
即Block, Element, Modifier,是OOCSS(面向对象css)的进阶版, 它是一种基于组件的web开发方法。blcok可以理解成独立的块,在页面中该块的移动并不会影响到内部样式(和组件的概念类似,独立的一块),element就是块下面的元素,和块有着藕断丝连的关系,modifier是表示样式大小等。我们来看一下element-ui的做法 我们...
用于demo编写和分享还是很不错的,尤其适合作为基于Vue相关项目的在线demo,目前很多Vue3的组件库都用了,仓库地址:@vue/repl。 @vue/repl有一些让人(我)眼前一亮的特性,比如数据存储在url...