mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-07 13:44:06 +08:00
95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<template>
|
||
<el-dialog title="Vue二次编辑" v-model="vueDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||
:center=true>
|
||
<CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/html"></CodeEditor>
|
||
|
||
<div style="text-align:center;padding: 10px;">
|
||
<el-button type="primary" @click="compile">开始解析</el-button>
|
||
<div style="color: #6c6c6c; font-size:12px; margin-top:5px;">Tips: 解析成功后VCC将展示解析后的效果</div>
|
||
<div v-if="error" style="color: red; font-size:12px; margin-top:5px;">请检查语法错误：{{error}}</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import dedent from 'dedent'
|
||
import CodeEditor from './CodeEditor.vue'
|
||
import { html2Json } from '../libs/bundle-html2json-esm';
|
||
import { ergodic, findAObject } from '../utils/common';
|
||
|
||
export default {
|
||
props: ['vueDialogVisible'],
|
||
emits: ['codeParseSucess', 'update:vueDialogVisible'],
|
||
components: {
|
||
CodeEditor
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
error: '',
|
||
code: dedent`
|
||
/**
|
||
* 请在此文本框贴入完整的Vue代码，并点击“开始解析”按钮。
|
||
* 目前仅支持简单的Vue文件。如果代码中包含其它组件，则不会正常展示，但依旧支持二次编辑。
|
||
*/
|
||
`
|
||
};
|
||
},
|
||
beforeCreate() { },
|
||
created() { },
|
||
beforeMount() { },
|
||
mounted() { },
|
||
beforeUpdate() { },
|
||
updated() { },
|
||
destoryed() { },
|
||
methods: {
|
||
handleClose() {
|
||
this.$emit("update:vueDialogVisible", false);
|
||
},
|
||
async compile() {
|
||
try {
|
||
const code = this.$refs.codeEditor.getEditorCode();
|
||
// 去掉注释，注释的替换逻辑并不健壮，用的是贪心方式
|
||
// const temp = code.replace(/.+\*\/\s*/gs, "");
|
||
const temp = code;
|
||
|
||
if (temp) {
|
||
// 解析Vue
|
||
const obj = await html2Json(temp);
|
||
// 取出template结构
|
||
const template = findAObject(obj.root.__children, 'template');
|
||
|
||
if (template) {
|
||
// 为每个节点增加lc_id
|
||
ergodic(template);
|
||
// 通知VCC渲染此结构
|
||
this.$emit("codeParseSucess", template);
|
||
this.handleClose();
|
||
} else {
|
||
this.error = 'Vue解析失败，请检查是不是完整的Vue结构';
|
||
}
|
||
} else {
|
||
this.error = '请输入Vue代码';
|
||
}
|
||
} catch (error) {
|
||
console.warn(error);
|
||
this.error = error;
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
},
|
||
computed: {
|
||
},
|
||
fillter: {},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 在此自动生成 */
|
||
|
||
:v-deep(.el-dialog__body) {
|
||
padding: 0 30px !important;
|
||
}
|
||
</style> |