diff --git a/package.json b/package.json index b5ec76205af2ee2ee55aa58cfe5d9947e6cbb21b..9a9696031ee3dfa2fa6637b878b8d2ae2c350ca4 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@element-plus/icons-vue": "^2.0.6", "element-plus": "^2.2.12", + "html2canvas": "^1.4.1", "sass": "^1.54.3", "vue": "^3.2.37", "vuedraggable": "^4.1.0" diff --git a/src/store/index.ts b/src/store/index.ts index 2e74c36fb2bd3c33a8b4fdd9fc9244da6e91b19b..f7491c0e9375f683451bebd9737aba764a91fdf1 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,16 +1,17 @@ -import {defineStore} from 'pinia'; +import { defineStore } from 'pinia'; import config from "@/config/editor.config"; import data from "@/config/data.json"; import cArgs from "@/config/component.config"; +import { HTMLTemplate } from "@/templates/html/index" // Re: 不建议使用setup模式定义，已改进 git export const userMainStore = defineStore('mainStore', { state: () => ({ list: config.componentList, tList: [], - stateStack:[], + stateStack: [], statePoint: -1, tree: data, - componentArgs:cArgs + componentArgs: cArgs }), actions: { executeUndo(): void { @@ -28,6 +29,26 @@ export const userMainStore = defineStore('mainStore', { }, clearStackTop(): void { this.stateStack.splice(this.statePoint + 1) + }, + exportCodes(designSize: number): void { + let template = new HTMLTemplate() + // DOM列表依次丢进accessDOM处理 + this.tList.map(arr => { + template.accessDOM(arr) + }) + // 下载 + this.downloadHTML('myhtml.html', template.generateTemplate(designSize)) + }, + resetCodes(): void { + this.tList = [] + }, + downloadHTML(fileName: string, template: any): void { + let htmlFile = document.createElement('a') + htmlFile.download = fileName + htmlFile.style.display = 'none' + let blob = new Blob([template]) + htmlFile.href = URL.createObjectURL(blob) + htmlFile.click() } } }); \ No newline at end of file diff --git a/src/templates/html/index.ts b/src/templates/html/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..c6f4fb8ccc5204517cf8ee6039e21db2010474e4 --- /dev/null +++ b/src/templates/html/index.ts @@ -0,0 +1,27 @@ +import cpt from '../../config/component.config' +import { template } from './template' +class HTMLTemplate { + private DOMs: Array = [] + private document = '' + accessDOM(e: any) { + // 解构基础信息与传入DOM结构进行比对 + // TODO: style + let { base, style } = cpt.BaseText + switch (e.label) { + case '文本': { + base[0].label = '默认文本' + this.DOMs.push({ + type: base[0].type, + label: base[0].label, + style: style + }) + this.document += `<${base[0].type}>${base[0].label}` + }; break; + default: return; + } + } + generateTemplate(designSize: number) { + return template(designSize,this.document) + } +} +export { HTMLTemplate }; \ No newline at end of file diff --git a/src/templates/html/template.ts b/src/templates/html/template.ts new file mode 100644 index 0000000000000000000000000000000000000000..3d6f74fa6abaefc74fad6878b1fd1c21b320e2de --- /dev/null +++ b/src/templates/html/template.ts @@ -0,0 +1,22 @@ +export let template =(designSize:number,document:string)=> ` + + + + + + + Document + + + +
+${document} +
+ + +` \ No newline at end of file diff --git a/src/templates/vue/index.ts b/src/templates/vue/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/views/Panel.vue b/src/views/Panel.vue index 4a045a49f64f6b1e4b94b7bdabdc2bb1a1b9cce9..9560b087a442a55cf210350d97a93b4b4f5703bc 100644 --- a/src/views/Panel.vue +++ b/src/views/Panel.vue @@ -13,7 +13,7 @@
- + @@ -21,7 +21,7 @@
- +
@@ -29,18 +29,18 @@
+ @change="handleChange" v-if="flog" /> + @change="handleChange" v-else />
- + - +
@@ -48,9 +48,9 @@
保存 - 重置页面 - 导出源码 - 预览 + 重置页面 + 导出源码 + 预览
@@ -60,21 +60,21 @@
- +
- +
- +
@@ -83,21 +83,21 @@
- +
- +
- +
自定义组件
@@ -107,25 +107,30 @@
- +
- +
- + +
+ +