perfect_monaco

src/views/components/PenProps.vue

@@ -1176,6 +1176,7 @@ const titleOptions: monacoOption[] = [
     tip: "mark函数",
     code: "",
     language: "javascript",
+    example:'//例如： return `${pen.name}<br/>${pen.text}`;'
   },
 ];
 

src/views/components/common/MonacoModal.vue

@@ -30,6 +30,7 @@ export interface monacoOption {
   tip?: string;
   code?: string;
   language: "javascript" | "json" | "markdown";
+  example?: string;
 }
 
 </script>
@@ -110,8 +111,8 @@ const changeOption = (e: number) => {
       props.options[beforeValue].code = editor.getValue();
       beforeValue = e;
     }
-    monaco.editor.setModelLanguage(editor.getModel(), props.options[e].language||'javascript');
-    editor.setValue(props.options[e].code);
+    monaco.editor.setModelLanguage(editor.getModel(), props.options[e].language || 'javascript');
+    editor.setValue(props.options[e].code || props.options[e].example ||"");
   }
 }
 
@@ -129,8 +130,9 @@ watch(
           });
         }
         if (props.options) {
-          editor.setValue(props.options[currentValue.value].code);
-          monaco.editor.setModelLanguage(editor.getModel(), props.options[currentValue.value].language);
+          const option = props.options[currentValue.value];
+          editor.setValue(option.code||option.example||'');
+          monaco.editor.setModelLanguage(editor.getModel(), option.language);
         } else {
           // 可见状态
           editor.setValue(props.code);