CodeEditor 代码编辑器 #

<template>
  <div class="test-code-page">
    <CodeEditor
      class="body"
      :lang="the.code.lang"
      :text="the.code.body"
      @onEvent="onCodeEditorEvent"
    >
      <template v-slot:tools>
        <Icon type="icon-shezhi" title="设置" @click="the.show = !the.show" />

        <Select v-model="the.code.lang" @onEvent="onLangEvent">
          <option
            v-for="(key, index) in the.code.langList"
            :key="index"
            :value="key"
          >
            {{ key }}
          </option>
        </Select>
      </template>

      <!-- 模板内容 -->
      let _str = ' 77.88888 '; let _jsonstr = `{id:123}`;
    </CodeEditor>
  </div>
</template>

<script>
export default {
  setup(props, context) {
    const { reactive } = window.$plus.vue;

    const the = reactive({
      code: {
        /** 代码语言类别 */
        lang: 'vue',
        langList: [
          'vue',
          'c#',
          'js',
          'css',
          'html',
          'md',
          'ts',
          'py',
          'sql',
          'xml-doc',
          'json',
          'bash',
          'c',
        ],
        title: '在线帮助',
        path: '/page/help/index',
        // 版本
        version: '0.0.1',
        // 编译后代码
        code: '',
        // 源代码
        body: '',
      },
    });

    const onCodeEditorEvent = (resp) => {
      console.log('onCodeEditorEvent', resp);
      the.code.body = resp.value;
    };

    const onLangEvent = (data) => {
      console.log('onLangEvent', the.code.lang, data);
    };

    return { the, onCodeEditorEvent, onLangEvent };
  },
};
</script>