diff --git a/src/components/Code.vue b/src/components/Code.vue index 3bab94d..db797fd 100644 --- a/src/components/Code.vue +++ b/src/components/Code.vue @@ -1,18 +1,27 @@ @@ -25,6 +34,7 @@ import copy from 'copy-to-clipboard'; import { saveAs } from "file-saver"; import CodeEditor from './CodeEditor.vue' +import singleIndexOutput from '../libs/singleIndexOutput.js'; export default { props: ['rawCode', 'codeDialogVisible'], @@ -35,7 +45,7 @@ export default { data() { return { // 在此自动生成 - + outputMode: "vue", iconCopy: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/copy-outline.svg"), iconDownload: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-download-outline.svg"), }; @@ -59,14 +69,14 @@ export default { this.copy(); }, copy() { - if (copy(this.prettyCode)) { + if (copy(this.outputCode)) { this.$message.success("代码已复制到剪贴板"); } else { this.$message.error("代码复制有点问题?"); } }, download() { - let blob = new Blob([this.prettyCode], { + let blob = new Blob([this.outputCode], { type: "text/plain;charset=utf-8", }); saveAs(blob, "VueComponent.vue"); @@ -83,6 +93,14 @@ export default { } }, computed: { + isVueMode() { + return this.outputMode === 'vue'; + }, + outputCode() { + return this.isVueMode ? this.prettyCode : this.singleIndex; + }, + + prettyCode() { try { return prettier.format(this.rawCode, { @@ -95,6 +113,19 @@ export default { } }, + + singleIndex() { + const htmlCode = singleIndexOutput(this.rawCode); + try { + return prettier.format(htmlCode, { + parser: "html", + plugins: [parserHtml], + vueIndentScriptAndStyle: true, + }); + } catch (error) { + return htmlCode; + } + } }, fillter: {}, }; diff --git a/src/libs/singleIndexOutput.js b/src/libs/singleIndexOutput.js new file mode 100644 index 0000000..8546024 --- /dev/null +++ b/src/libs/singleIndexOutput.js @@ -0,0 +1,39 @@ +import { parseComponent } from 'vue-template-compiler/browser'; + +const outputVue2Template = ` + + + + VCC预览 + + + + + +
+ #templateHolder +
+ + + + + + +` + +export default function (vueCode) { + const { template, script, styles, customBlocks } = parseComponent(vueCode); + + let newScript = script.content.replace(/\s*export default\s*/, ""); + + let output = outputVue2Template; + + output = output.replace("#templateHolder", template.content); + output = output.replace("#logicHolder", newScript); + output = output.replace("#styleTemplate", styles[0].content); + + return output; +} +