html - WhatsApp Web 喜欢 Content Editable Div

Question

我正在寻找一种方法来制作类似 WhatsApp Web 的内容可编辑 div，当按下 SHIFT+ENTER 时它会向上扩展，并相应地最小化它上方的 div(请参见所附屏幕截图中的紫色区域)。

实现这个的最佳方法是什么？

非常感谢。

编辑:我将 vuejs 与 vuetify 一起使用。

Answer 1

我在 css 中使用变量来 clac .converstion div 的 height : https://www.w3schools.com/css/css3_variables.asp

我正在使用 Jquery 但您可以使用 Vue JS

参见 JSFiddle:https://jsfiddle.net/8feswyau/

$('textarea').on({input: function(){
    var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
    $(this).css({'height':totalHeight});
    $('.conversation').get(0).style.setProperty("--number",totalHeight+'px')
}
});

 textarea{
 width:243px;
 
 }
.warp{
height:300px;
width:250px;
}
.conversation{
 height: calc(100% - var(--number));
    position: relative;
    background: #efe7dd url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg) repeat;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warp">
<div class="conversation" style="--number: 12px"></div>
<textarea></textarea>
</div>