fix: fixed prop mode of CodeEditor

src/components/CodeEditor/index.ts

@@ -4,3 +4,5 @@ import jsonPreview from './src/json-preview/JsonPreview.vue';
 
 export const CodeEditor = withInstall(codeEditor);
 export const JsonPreview = withInstall(jsonPreview);
+
+export * from './src/typing';

src/components/CodeEditor/src/CodeEditor.vue

@@ -12,11 +12,18 @@
   import { computed } from 'vue';
   import CodeMirrorEditor from './codemirror/CodeMirror.vue';
   import { isString } from '/@/utils/is';
-  import type { MODE } from './typing';
+  import { MODE } from './typing';
 
   const props = defineProps({
     value: { type: [Object, String] as PropType<Record<string, any> | string> },
-    mode: { type: String, default: MODE.JSON },
+    mode: {
+      type: String as PropType<MODE>,
+      default: MODE.JSON,
+      validator(value: any) {
+        // 这个值必须匹配下列字符串中的一个
+        return Object.values(MODE).includes(value);
+      },
+    },
     readonly: { type: Boolean },
     autoFormat: { type: Boolean, default: true },
   });

src/components/CodeEditor/src/codemirror/CodeMirror.vue

@@ -8,6 +8,7 @@
   import { useAppStore } from '/@/store/modules/app';
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
   import CodeMirror from 'codemirror';
+  import { MODE } from './../typing';
   // css
   import './codemirror.css';
   import 'codemirror/theme/idea.css';
@@ -18,7 +19,14 @@
   import 'codemirror/mode/htmlmixed/htmlmixed';
 
   const props = defineProps({
-    mode: { type: String, default: 'application/json' },
+    mode: {
+      type: String as PropType<MODE>,
+      default: MODE.JSON,
+      validator(value: any) {
+        // 这个值必须匹配下列字符串中的一个
+        return Object.values(MODE).includes(value);
+      },
+    },
     value: { type: String, default: '' },
     readonly: { type: Boolean, default: false },
   });

src/components/CodeEditor/src/typing.ts

@@ -1,5 +1,5 @@
-export const MODE = {
+export enum MODE {
-  JSON: 'application/json',
+  JSON = 'application/json',
-  html: 'htmlmixed',
+  HTML = 'htmlmixed',
-  js: 'javascript',
+  JS = 'javascript',
-};
+}

src/views/demo/editor/json/index.vue

@@ -15,7 +15,7 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref, unref, h } from 'vue';
-  import { CodeEditor, JsonPreview } from '/@/components/CodeEditor';
+  import { CodeEditor, JsonPreview, MODE } from '/@/components/CodeEditor';
   import { PageWrapper } from '/@/components/Page';
   import { Radio, Space, Modal } from 'ant-design-vue';
 
@@ -62,20 +62,20 @@
       ASpace: Space,
     },
     setup() {
-      const modeValue = ref('application/json');
+      const modeValue = ref<MODE>(MODE.JSON);
       const value = ref(jsonData);
 
       function handleModeChange(e: ChangeEvent) {
         const mode = e.target.value;
-        if (mode === 'application/json') {
+        if (mode === MODE.JSON) {
           value.value = jsonData;
           return;
         }
-        if (mode === 'htmlmixed') {
+        if (mode === MODE.HTML) {
           value.value = htmlData;
           return;
         }
-        if (mode === 'javascript') {
+        if (mode === MODE.JS) {
           value.value = jsData;
           return;
         }