vue3.0-monaco组件封装存档代码解析

<template>
  <div
    ref="main"
    class="codeEditBox editor-container"
    style="width: 100%; height: 400px"
  />
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as monaco from 'monaco-editor'
import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql'
const { keywords } = language
const main = ref()
const tables = {
  users: ['name', 'id', 'email', 'phone', 'password'],
  roles: ['id', 'name', 'order', 'created_at', 'updated_at', 'deleted_at'],
}
let editor: monaco.editor.IStandaloneCodeEditor
const props = defineProps({
  initValue: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:initValue', 'change', 'ctrlS'])
const defaultOptions: any = {
  // theme, // 主题
  value: props.initValue, // 默认显示的值
  language: 'sql', // 语言
  folding: true, // 是否折叠
  minimap: {
    // 关闭小地图
    enabled: false,
  },
  wordWrap: 'on',
  wrappingIndent: 'indent',
  foldingHighlight: true, // 折叠等高线
  foldingStrategy: 'indentation', // 折叠方式  auto | indentation
  showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
  disableLayerHinting: true, // 等宽优化
  emptySelectionClipboard: false, // 空选择剪切板
  selectionClipboard: true, // 选择剪切板
  // automaticLayout: true, // 自动布局
  // overviewRulerBorder: false, // 不要滚动条的边框
  codeLens: true, // 代码镜头
  scrollBeyondLastLine: true, // 滚动完最后一行后再滚动一屏幕
  colorDecorators: true, // 颜色装饰器
  accessibilitySupport: 'on', // 辅助功能支持  "auto" | "off" | "on"
  lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
  lineNumbersMinChars: 5, // 行号最小字符   number
  // enableSplitViewResizing: 'on',
  // readOnly: false, // 是否只读  取值 true | false
  fixedOverflowWidgets: true,
  quickSuggestions: true,
  // acceptSuggestionOnEnter: 'on',
  theme: 'vs',
  formatOnPaste: true, // 粘贴时自动格式化
}
onMounted(() => {
  initAutoCompletion()
  init()
})
onUnmounted(() => {
  editor.dispose()
})
function init() {
  // 使用 - 创建 monacoEditor 对象
  editor = monaco.editor.create(
    document.querySelector('.codeEditBox') as HTMLElement,
    defaultOptions,
  )
  // 监听值的变化
  editor.onDidChangeModelContent((val: any) => {
    const text = editor.getValue()
    emit('update:initValue', text)
  })
}
// 覆盖默认ctrl+s浏览器保存
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown)
})
const handleKeyDown = (event) => {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault() // 阻止浏览器默认的保存操作
    // 执行调试
    emit('ctrlS')
  }
}
/**
 * @description: 初始化自动补全
 */
function initAutoCompletion() {
  monaco.languages.registerCompletionItemProvider('sql', {
    // 触发提示的字符
    triggerCharacters: ['.', ' ', ...keywords],
    provideCompletionItems: (model, position) => {
      let suggestions: any = []
      // 行号，列号
      const { lineNumber, column } = position
      // 光标之前的所有字符，即从这一行的 0 到当前的字符
      const textBeforePointer = model.getValueInRange({
        startLineNumber: lineNumber,
        startColumn: 0,
        endLineNumber: lineNumber,
        endColumn: column,
      })
      // trim() 取消两边空格，保证拆分出来前后都不是空值
      // \s是指空白，包括空格、换行、tab缩进等所有的空白
      const words = textBeforePointer.trim().split(/\s+/)
      // 最后的一个有效词
      const lastWord = words[words.length - 1]
      if (lastWord.endsWith('.')) {
        // 如果这个词以 . 结尾，那么认为是希望补全表的字段
        // 拿到真实的表名，把 . 去掉
        const tableName = lastWord.slice(0, lastWord.length - 1)
        if (Object.keys(tables).includes(tableName)) {
          suggestions = [...getFieldsSuggest(tableName)]
        }
      } else if (lastWord === '.') {
        // 如果这个词本身就是一个 . 即点前面是空的，那么什么都不用补全了
        // 按理说这应该是个语法错误
        suggestions = []
      } else {
        // 其他时候都补全表名，以及关键字
        suggestions = [...getTableSuggest(), ...getKeywordsSuggest()]
      }
      return {
        suggestions,
      }
    },
  })
}
/**
 * @description: 获取关键字的补全列表
 * @tips: CompletionItemKind 的所有枚举可以在monaco.d.ts 文件中找到，有二十多个，取需即可
 */
function getKeywordsSuggest() {
  return keywords.map((key) => ({
    label: key, // 显示的名称
    kind: monaco.languages.CompletionItemKind.Keyword,
    insertText: key, // 真实补全的值
  }))
}
/**
 * @description: 获取表名的补全列表
 */
function getTableSuggest() {
  return Object.keys(tables).map((key) => ({
    label: key, // 显示的名称
    kind: monaco.languages.CompletionItemKind.Variable,
    insertText: key, // 真实补全的值
  }))
}
watch(() => props.initValue, (newVal) => {
  console.log('newVal', newVal)
  editor.setValue(newVal)
})
/**
 * @description: 根据表名获取字段补全列表
 * @param {*} tableName
 */
function getFieldsSuggest(tableName) {
  const fields = tables[tableName]
  if (!fields) {
    return []
  }
  return fields.map((name) => ({
    label: name,
    kind: monaco.languages.CompletionItemKind.Field,
    insertText: name,
  }))
}
</script>
<style>
.editor-container {
  border: 1px solid #ccc;
}
</style>

watch(() => props.initValue, (newVal) => {
  editor.setValue(newVal)
})

    <MonacoEditor
          language="JSON"
          v-model:initValue="clickItem.form"
          ref="monacoRef"
        />