用vue2-ace-editor做个代码编辑界面

要将 vue2-ace-editor 封装成一个组件，你可以遵循以下步骤：

1. 创建组件文件：在你的 Vue 项目的 src/components 目录下创建一个新的 Vue 文件，例如 AceEditor.vue。
2. 编写组件代码：在这个文件中，你可以定义你的组件模板、样式和逻辑。以下是一个基本的封装示例：

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 主题选择下拉框 -->
        <el-select v-model="aceConfig.selectTheme" placeholder="请选择主题" size="small" style="width: 120px; float: right; margin-left: 10px;">
          <el-option
            v-for="theme in aceConfig.themes"
            :key="theme"
            :label="theme"
            :value="theme">
          </el-option>
        </el-select>
        <!-- 语言选择下拉框 -->
        <el-select v-model="aceConfig.selectLang" placeholder="请选择语言" size="small" style="width: 120px; float: right;">
          <el-option
            v-for="lang in aceConfig.langs"
            :key="lang"
            :label="lang"
            :value="lang">
          </el-option>
        </el-select>
        <!-- 编辑器设置按钮 -->
        <el-button type="text" icon="el-icon-setting" @click="showSettingModal" style="float: right;"></el-button>
      </div>
      <!-- 编辑器 -->
      <editor
        :value="content"
        @input="handleInput"
        @init="editorInit"
        :lang="aceConfig.selectLang"
        :theme="aceConfig.selectTheme"
        :options="aceConfig.options"
        width="100%"
        height="400px"/>
    </el-card>
    <!-- 编辑器设置模态窗口 -->
    <el-dialog
      title="编辑器设置(功能暂未开发)"
      :visible.sync="visible"
      width="500px"
      @close="handleClose">
      <el-form>
        <el-form-item label="Tab 长度">
          <el-select v-model="aceConfig.options.tabSize" placeholder="请选择Tab长度" @change="handleTabChange" disabled>
            <el-option
              v-for="tab in aceConfig.tabs"
              :key="tab"
              :label="tab + '个空格'"
              :value="tab">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体设置">
          <el-select v-model="aceConfig.options.fontSize" placeholder="请选择字体大小" @change="handleFontChange" disabled>
            <el-option
              v-for="font in aceConfig.fontSizes"
              :key="font"
              :label="font + 'px'"
              :value="font">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 编辑器主题
const themes = [
  'xcode',
  'eclipse',
  'monokai',
  'cobalt'
];
// 编辑器语言
const langs = [
  'c_cpp',
  'java',
  'javascript',
  'golang'
];
// tabs
const tabs = [2, 4, 8];
// 字体大小
const fontSizes = [14, 15, 16, 17, 18, 19, 20, 21, 22];
// 编辑器选项
const options = {
  tabSize: 4, // tab默认大小
  showPrintMargin: false, // 去除编辑器里的竖线
  fontSize: 20, // 字体大小
  highlightActiveLine: true, // 高亮配置
  enableBasicAutocompletion: true, //启用基本自动完成
  enableSnippets: true, // 启用代码段
  enableLiveAutocompletion: true, // 启用实时自动完成
};
export default {
  name: "CodeEdit",
  components: {
    editor: require('vue2-ace-editor'),
  },
  data() {
    return {
      visible: false, // 模态窗口显示控制
      aceConfig: { // 代码块配置
        langs, // 语言
        themes, // 主题
        tabs, // tab空格
        fontSizes,
        options, // 编辑器属性设置
        selectTheme: 'xcode', // 默认选择的主题
        selectLang: 'c_cpp', // 默认选择的语言
        readOnly: false, // 是否只读
      },
    }
  },
  props: {
    content: String // content就是上面prop中声明的值，要保持一致
  },
  methods: {
    handleInput(e) {
      this.$emit('change', e);
    },
    showSettingModal() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
      // this.editorInit();
    },
    handleThemeChange(value) {
      this.aceConfig.selectTheme = value;
      this.editorInit();
    },
    handleLangChange(value) {
      this.aceConfig.selectLang = value;
      this.editorInit();
    },
    handleTabChange(value) {
      this.aceConfig.options.tabSize = value;
      this.editorInit();
    },
    handleFontChange(value) {
      this.aceConfig.options.fontSize = value;
      this.editorInit();
    },
    editorInit () {
      require('brace/ext/language_tools');
      require(`brace/mode/${this.aceConfig.selectLang}`);
      require(`brace/theme/${this.aceConfig.selectTheme}`);
    },
    handleClose() {
      this.visible = false;
    }
  }
}
</script>

<style scoped>
.settingTitle {
  font-size: larger;
}
.settingDescription {
  font-size: small;
  color: #a8a8af;
}
</style>

以上步骤展示了如何将 vue2-ace-editor 封装成一个 Vue 组件，并在项目中使用它。你可以根据需要调整组件的属性和方法，以满足你的具体需求。这个封装方法可以让你在多个地方重用代码编辑器，同时保持代码的整洁和可维护性。