配置代码编辑依赖

heimawl

2023-06-26 12cf420ba7b6f85ebd7883fa799df5d8b5cd0ecf

 src/views/Intelligentcenter/centercontrol/index.vue

@@ -76,16 +76,37 @@
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="leftvalu-code">
        <codemirror v-model="code" :options="options"></codemirror>
      </div>
    </div>
  </div>
</template>

<script>
// import { codemirror } from "vue-codemirror";
export default {
  name: "education",

  data() {
    return {
      code: "",
      options: {
        line: true,
        theme: "rubyblue", // 主题
        tabSize: 4, // 制表符的宽度
        indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
        firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
        readOnly: false, // 只读
        autorefresh: true,
        smartIndent: true, // 上下文缩进
        lineNumbers: true, // 是否显示行号
        styleActiveLine: true, // 高亮选中行
        viewportMargin: Infinity, //处理高度自适应时搭配使用
        showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
        mode: "javascript",
      },

      editableTabsValue: "2-2-3",
      editableTabslist: [
        {
@@ -143,24 +164,19 @@
      });

      var results = this.editableTabs.some(function (item) {
        if (item.name == "张三") {
        if (item.name == key) {
          //item.name == "王麻子"
          return true; //返回false
        }
      });
      this.editableTabs.push(result);
      if (!results) {
        this.editableTabs.push(result);
      }
      this.editableTabsValue = key;
      console.log(result);
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: "New Tab",
          name: newTabName,
          content: "New Tab content",
        });
        this.editableTabsValue = newTabName;
      }
      if (action === "remove") {
        let tabs = this.editableTabs;
@@ -187,6 +203,17 @@
<style lang="scss" scoped>
.educationmanagement {
  display: flex;
}
.leftvalu-code {
  // background: #3a3d42;
  // height: 300px;
  // ::v-deep.CodeMirror {
  //   position: relative;
  //   overflow: hidden;
  //   background: #3a3d42;
  //   color: #3a92ef;
  //   font-size: 20px;
  // }
}
.sidecolumn {
  width: 300px;
@@ -224,6 +251,7 @@
    display: center !important;
  }
}

.qrcode-dialo {
  text-align: center;
  //   display: flex;