前言
关于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的底栏固定在一个高度,希望可以解决.
参考
cm-resieze demo<-这个基于textarea实现效果很好
基于div的单栏可变高度<-这个的bar很符合我心目中的标准
还有一个专门针对codemirror resize的讨论帖,突然找不到了,那个帮助也很大