使用ace作为脚本编辑器

zhangzengfei

2021-11-19 af1f5e1d049f669b3295e8f357c1be4f6a811b1c

 src/views/project/components/ProjectEdit.vue

@@ -24,8 +24,7 @@
              autocomplete="off"
              show-password
            >
              ></el-input
            >
            </el-input>
          </el-form-item>
          <el-form-item label="项目描述" prop="desc">
            <el-input v-model="form.desc"></el-input>
@@ -53,10 +52,28 @@
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="编译脚本" name="build">
        <textarea v-model="form.buildScript" cols="60" rows="10"></textarea>
        <!-- <textarea v-model="form.buildScript" cols="60" rows="10"></textarea> -->
        <code-editor
          v-if="activeName == 'build'"
          v-model="form.buildScript"
          lang="sh"
          theme="chrome"
          width="500"
          height="100"
          @init="editorInit"
        ></code-editor>
      </el-tab-pane>
      <el-tab-pane label="打包脚本" name="pack">
        <textarea v-model="form.packScript" cols="60" rows="10"></textarea>
        <!-- <textarea v-model="form.packScript" cols="60" rows="10"></textarea> -->
        <code-editor
          v-if="activeName == 'pack'"
          v-model="form.packScript"
          lang="sh"
          theme="chrome"
          width="500"
          height="100"
          @init="editorInit"
        ></code-editor>
      </el-tab-pane>
    </el-tabs>

@@ -69,15 +86,20 @@

<script>
import { doEdit } from "@/api/project";
import CodeEditor from "vue2-ace-editor";

export default {
  name: "ProjectEdit",
  components: {
    CodeEditor,
  },
  data() {
    return {
      activeName: "base",
      form: {
        title: "",
        author: "",
        packScript:
          "#!/bin/sh\n#打包开始会在项目下创建integrate-build的临时文件夹\n#打包脚本执行路径为项目下的integrate-build文件夹内\n#需复制上级目录的编译完成的目标文件到当前位置\n",
        buildScript: "#!/bin/sh\n",
      },
      rules: {
        title: [{ required: true, trigger: "blur", message: "请输入标题" }],
@@ -88,9 +110,10 @@
      edit: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    showEdit(row) {
      this.activeName = "base";
      if (!row) {
        this.title = "添加";
        this.edit = false;
@@ -126,6 +149,11 @@
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    editorInit() {
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/sh");
      require("brace/theme/chrome");
    },
  },
};
</script>