vue+CodeMirror+垂直双栏布局

1,774

前言

关于codemirror在nuxt中正确引入,在上一篇blog里有做介绍,现在想要实现可以像codepen一样,自由调节的垂直双栏代码输入框,要怎么做呢?

官方文档

Codemirror官方有给出 resize属性,加上这个css属性,我们会看到右下角有一个小标记,可以自由地调节单个高度与宽度,将其设定为: resize: vertical;就可以限定只调整高度了.

进一步调整

然而双栏并不是那么容易,首先理想型的上下栏调整需要中间有一个可以调节的bar,而不是单单的左下角,其次,如何在一个div中恰好地容纳下两个div,并且动态地调整高度呢?

压缩上面的div,动态更新下面的div并使其占满,这里我们要用到两个属性:flex+overflow

最终配置

    css:
    .wrapper {
      display: flex;
      flex-direction: column;
      height: 580px;
      overflow: auto;
    }

    .box1, .box2 {
      border-radius: 5px;
      padding: 20px;
      font-size: 100%;
      box-sizing: inherit;
      overflow: auto;//防止拖拽超过wrapper高度
    }

    .handler {
      width: 100%;
      height: 7px;
      padding: 0;
      cursor: ns-resize;
      z-index: 2;//这里是为了防止移动时被codemirror数字覆盖
    }

    .handler::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
    }

    .CodeMirror {
      resize: vertical;
      overflow: auto !important;
    }
<div class="wrapper">
  <no-ssr placeholder="Codemirror Loading..." class="box1">
    <codemirror v-model="code1"
                :options="cmOption"
                @cursorActivity="onCmCursorActivity"
                @ready="onCmReady"
                @focus="onCmFocus"
                @blur="onCmBlur">
    </codemirror>
  </no-ssr>
  <div class="handler"></div>
  <no-ssr placeholder="Codemirror Loading..." class="box2">
    <codemirror v-model="code2"
                :options="cmOption"
                @cursorActivity="onCmCursorActivity"
                @ready="onCmReady"
                @focus="onCmFocus"
                @blur="onCmBlur">
    </codemirror>
  </no-ssr>
</div>

效果图

效果图
啊无视这个背景颜色,这是我chrome插件的问题。

这里还存在无法固定底栏的问题,下次查查如何才能将一个div的底栏固定在一个高度,希望可以解决.

参考

vue-resieze深度解读

cm-resieze demo<-这个基于textarea实现效果很好

基于div的单栏可变高度<-这个的bar很符合我心目中的标准

codemirror resize+padding

还有一个专门针对codemirror resize的讨论帖,突然找不到了,那个帮助也很大