mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-06 13:04:05 +08:00
update: 支持输出单页html
This commit is contained in:
shangbin
parent
5dd1db15bd
commit
8bc06d5ca6
@ -1,18 +1,27 @@
|
||||
<template>
|
||||
<el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
|
||||
<!-- 这里加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>
|
||||
<template v-slot:footer>
|
||||
<span>
|
||||
<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>
|
||||
</span>
|
||||
</template>
|
||||
<div style="text-aligin:center;">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-radio-group v-model="outputMode">
|
||||
<el-radio label="vue">Vue</el-radio>
|
||||
<el-radio label="html">单页Html</el-radio>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<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>
|
||||
|
||||
</template>
|
||||
@ -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: {},
|
||||
};
|
||||
|
||||
39
src/libs/singleIndexOutput.js
Normal file
39
src/libs/singleIndexOutput.js
Normal 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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user