study/vue-component-creater-ui
1
0
Fork 0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-07 21:54:05 +08:00
Code Issues Releases Wiki Activity

update: 支持输出单页html

Browse Source
This commit is contained in:
shangbin 2022-01-07 18:49:12 +08:00
parent 5dd1db15bd
commit 8bc06d5ca6
2 changed files with 84 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Code.vue
View File

@ -1,18 +1,27 @@
<template> <template>
<el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true> <el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
<!-- 这里加v-if是因为CodeEditor内部不支持watch数据监测 --> <!-- 这里加v-if是因为CodeEditor内部不支持watch数据监测 -->
<CodeEditor v-if="codeDialogVisible" style="max-height: 65vh;" ref="codeEditor" :initCode="prettyCode" mode="text/html"></CodeEditor> <CodeEditor v-if="codeDialogVisible" style="max-height: 65vh;" ref="codeEditor" :initCode="outputCode"
mode="text/html"></CodeEditor>
<div style="color: #666; font-size: 12px; text-align:center; margin: 5px;">使用代码前请确认相应的组件库已集成至项目</div> <div style="color: #666; font-size: 12px; text-align:center; margin: 5px;">使用代码前请确认相应的组件库已集成至项目</div>
<template v-slot:footer> <div style="text-aligin:center;">
<span> <el-row>
<el-tooltip effect="dark" content="拷贝" placement="left"> <el-col :span="12">
<img class="round-icon" :src="iconCopy" alt="" @click="copyCheck"> <el-radio-group v-model="outputMode">
</el-tooltip> <el-radio label="vue">Vue</el-radio>
<el-tooltip effect="dark" content="下载" placement="right"> <el-radio label="html">单页Html</el-radio>
<img class="round-icon" :src="iconDownload" alt="" @click="download"> </el-radio-group>
</el-tooltip> </el-col>
</span> <el-col :span="12">
</template> <el-tooltip effect="dark" content="拷贝" placement="left">
<img class="round-icon" :src="iconCopy" alt="" @click="copyCheck">
</el-tooltip>
<el-tooltip effect="dark" content="下载" placement="right">
<img class="round-icon" :src="iconDownload" alt="" @click="download">
</el-tooltip>
</el-col>
</el-row>
</div>
</el-dialog> </el-dialog>
</template> </template>
@ -25,6 +34,7 @@ import copy from 'copy-to-clipboard';
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import CodeEditor from './CodeEditor.vue' import CodeEditor from './CodeEditor.vue'
import singleIndexOutput from '../libs/singleIndexOutput.js';
export default { export default {
props: ['rawCode', 'codeDialogVisible'], props: ['rawCode', 'codeDialogVisible'],
@ -35,7 +45,7 @@ export default {
data() { data() {
return { return {
// 在此自动生成 // 在此自动生成
outputMode: "vue",
iconCopy: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/copy-outline.svg"), 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"), iconDownload: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-download-outline.svg"),
}; };
@ -59,14 +69,14 @@ export default {
this.copy(); this.copy();
}, },
copy() { copy() {
if (copy(this.prettyCode)) { if (copy(this.outputCode)) {
this.$message.success("代码已复制到剪贴板"); this.$message.success("代码已复制到剪贴板");
} else { } else {
this.$message.error("代码复制有点问题?"); this.$message.error("代码复制有点问题?");
} }
}, },
download() { download() {
let blob = new Blob([this.prettyCode], { let blob = new Blob([this.outputCode], {
type: "text/plain;charset=utf-8", type: "text/plain;charset=utf-8",
}); });
saveAs(blob, "VueComponent.vue"); saveAs(blob, "VueComponent.vue");
@ -83,6 +93,14 @@ export default {
} }
}, },
computed: { computed: {
isVueMode() {
return this.outputMode === 'vue';
},
outputCode() {
return this.isVueMode ? this.prettyCode : this.singleIndex;
},
prettyCode() { prettyCode() {
try { try {
return prettier.format(this.rawCode, { 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: {}, fillter: {},
}; };

39
src/libs/singleIndexOutput.js Normal file
View File

@ -0,0 +1,39 @@
import { parseComponent } from 'vue-template-compiler/browser';
const outputVue2Template = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VCC预览</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style stype="text/css">#styleTemplate</style>
</head>
<body>
<div id="app">
#templateHolder
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue(#logicHolder).$mount("#app");
</script>
</html>`
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;
}