web_dist/src/views/utilities/page-editor-help/JsEditDialog.vue

<script setup lang="ts">
import {defineProps, nextTick, onMounted, ref} from "vue";
import {useVModel} from "@vueuse/core";
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor';
import sleep from "../../../utils/sleep";
import {componentType} from "../../../components/query-components/page-help-type";

const props = defineProps<{
  submitEvent: string,
  modelValue: boolean,
  pageJson: componentType
}>()

const dialog = ref(true)
const emits = defineEmits(['update:modelValue', 'update:submitEvent'])

const submitEventVal = useVModel(props, 'submitEvent', emits)
const modValue = useVModel(props, 'modelValue', emits)

const jsEdit = ref(null)

// 提示
self.MonacoEnvironment = {
  getWorker(_: string, label: string) {
    if (label === 'json') {
      return new jsonWorker()
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker()
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker()
    }
    if (['typescript', 'javascript'].includes(label)) {
      return new tsWorker()
    }
    return new EditorWorker()
  },
}

let queryType, configType;
const setQueryType = () => {
  let tempStr = `let queryData =  ${JSON.stringify(props.pageJson.queryParam)} `
  queryType = monaco.languages.typescript.javascriptDefaults.addExtraLib(tempStr, 'queryData');
}

const setConfigType = () => {
  configType = monaco
      .languages
      .typescript
      .javascriptDefaults
      .addExtraLib(`let config = ${JSON.stringify(props.pageJson)}`);
}

const closed = () => {
  // 销毁类型下一个人要用
  queryType.dispose()
  configType.dispose()
  modValue.value = false
}

onMounted(async () => {
  await nextTick()
  const monacoEditor = monaco.editor.create(jsEdit.value, {
    // 初始化的dom节点
    value: submitEventVal.value, // 初始化值
    language: 'javascript', // 语言支持自行查阅demo
    automaticLayout: true, // 自适应布局
    theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
    foldingStrategy: 'indentation',
    renderLineHighlight: 'all', // 行亮
    selectOnLineNumbers: true, // 显示行号
    minimap: {
      enabled: false,
    },
    readOnly: false, // 只读
    fontSize: 16, // 字体大小
    scrollBeyondLastLine: false, // 取消代码后面一大段空白
    overviewRulerBorder: true,
  });
  monacoEditor.onDidChangeModelContent((val) => {
    submitEventVal.value = monacoEditor.getValue();
  })
  await nextTick()
  await sleep(200)

  monacoEditor.focus()
  setQueryType()
  setConfigType()
})


</script>

<template>
  <el-dialog v-model="dialog" title="代码编辑" draggable @closed="closed">
    <div ref="jsEdit" style="width: 100%; height: 400px"></div>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>