vue codemirror 设置高度无效的解决办法

小咪咪 2022-10-10 09:44 562阅读 0赞

### 最近使用vue-codemirror发现设置高度怎么都不生效，网上的办法都用了也不行，最后终于摸索出解决办法 ###

### 首先是坑 ###

不能使用scss, 只有使用css才有效

要给.CodeMirror-scroll设置高度，给.CodeMirror设置高度无效

<template>
      <div class="root">
        <div class="my">
          <codemirror
            ref="myCm"
            v-model="formData.queryText"
            :options="cmOptions"
            @ready="onCmReady"
            @focus="onCmFocus"
            @input="onCmCodeChange"
          >
          </codemirror>
        </div>
      </div>
    </template>
    <script>
    import "codemirror/mode/sql/sql.js";
    // theme css
    import "codemirror/theme/solarized.css";
    // require active-line.js
    import "codemirror/addon/selection/active-line.js";
    // closebrackets
    import "codemirror/addon/edit/closebrackets.js";
    
    export default {
      data() {
        return {
          formData: {
            queryText: "",
          },
          cmOptions: {
            tabSize: 4,
            styleActiveLine: true,
            lineNumbers: true,
            line: true,
            mode: "text/x-mysql",
            theme: "solarized light",
          },
        };
      },
      computed: {
        codemirror() {
          return this.$refs.myCm.codemirror;
        },
      },
      methods: {
        showSQL(val) {
          this.formData.queryText = val ? val : "";
        },
        onCmReady(cm) {
          this.codemirror.setSize("-webkit-fill-available", "auto");
        },
        onCmFocus(cm) {
          // console.log('the editor is focus!', cm)
        },
        onCmCodeChange(newCode) {
          console.log("this is new code", newCode);
          this.formData.queryText = newCode;
          this.$emit("codeChange", this.formData.queryText);
        },
      },
    };
    </script>
    <style scoped lang="css">
    .root {
      height: 700px;
      background-color: rgb(228, 41, 41);
    }
    .my {
      width: 900px;
      height: 600px;
      background-color: rgb(151, 73, 73);
    }
    .my >>> .CodeMirror-scroll {
      height: 500px;
      overflow-y: hidden;
      overflow-x: auto;
    }
    
    
    </style>