配置代码编辑依赖

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: [
        {
@@ -183,6 +204,17 @@
.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;
  min-height: 100vh;
@@ -219,6 +251,7 @@
    display: center !important;
  }
}

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