update: 调出代码展示框

src/components/Code.vue

@@ -1,11 +1,8 @@
 <template>
   <el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
-    <pre style="max-height: 60vh;">
-    <code v-html="formatCode"></code>
-    </pre>
-    <div>
-      <div style="color: #666; font-size: 12px;text-align">使用代码前请确认相应的组件库已集成至项目</div>
-    </div>
+    <!-- 这里加v-if是因为CodeEditor内部不支持watch数据监测 -->
+    <CodeEditor v-if="codeDialogVisible" style="max-height: 65vh;" ref="codeEditor" :initCode="prettyCode" 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">
@@ -22,14 +19,18 @@
 
 <script>
 import './prism.css'
-import Prism from "prismjs";
 import prettier from "prettier/standalone";
 import parserHtml from "prettier/parser-html";
 import copy from 'copy-to-clipboard';
 import { saveAs } from "file-saver";
 
+import CodeEditor from './CodeEditor.vue'
+
 export default {
   props: ['rawCode', 'codeDialogVisible'],
+  components: {
+    CodeEditor
+  },
 
   data() {
     return {
@@ -94,10 +95,6 @@ export default {
       }
 
     },
-
-    formatCode() {
-      return Prism.highlight(this.prettyCode, Prism.languages.markup, "html");
-    }
   },
   fillter: {},
 };

src/components/CodeEditor.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="codemirror">
-    <codemirror v-model="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
+    <codemirror v-model:value="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
       @focus="onCmFocus" @blur="onCmBlur" />
   </div>
 </template>
 
 <script>
-import { codemirror } from 'vue-codemirror'
+import Codemirror from "codemirror-editor-vue3";
 
 // base style
 import 'codemirror/lib/codemirror.css'
@@ -62,7 +62,7 @@ export default {
   name: 'code-editor',
   title: 'Mode: text/x-vue & Theme: monokai',
   components: {
-    codemirror
+    Codemirror
   },
   computed: {
     code: {
@@ -74,6 +74,12 @@ export default {
       }
     }
   },
+  watch: {
+    initCode(){
+      this.codeStore = this.initCode;
+    }
+  },
+
   data() {
     return {
       codeStore: this.initCode,

src/components/JSCodeEditorDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
     :center=true>
-    <!-- <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor> -->
+    <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor>
 
     <div style="text-align:center;padding: 10px;">
       <el-button type="primary" @click="onSave">确认修改</el-button>
@@ -14,13 +14,13 @@
 
 <script>
 import dedent from 'dedent'
-// import CodeEditor from './CodeEditor.vue'
+import CodeEditor from './CodeEditor.vue'
 
 export default {
   props: ['codeDialogVisible'],
-  emits: ['saveJSCode'],
+  emits: ['saveJSCode', 'update:codeDialogVisible'],
   components: {
-    // CodeEditor
+    CodeEditor
   },
 
   data() {
@@ -89,7 +89,7 @@ export default {
       // 网络请求，可选
     },
     handleClose() {
-      // this.$emit("update:codeDialogVisible", false);
+      this.$emit("update:codeDialogVisible", false);
     },
     onSave() {
       const code = this.$refs.codeEditor.getEditorCode();