input/textarea 入力ボックスは高さに適応できません。代わりに contenteditable を使用してください

今日のチキンスープ: あなたが学びたいと思うすべての考えは、助けを求めている未来の自分です

入力入力ボックスは折り返せないので、代わりに textarea を使用することもできますが、textarea の問題は、コンテンツに応じて高さを調整できないことであり、非常に面倒です。

編集可能なコンテンツを表示する要素が、コンテンツの変更に応じて高さに適応できることを望む場合があります。現時点では、contenteditable 属性の使用を検討し、それを div 要素で使用できます。div などの高速要素は、高さに適応できます。 height を追加し、 contenteditable を追加すると、編集できるようになります。

グローバル プロパティは、 contenteditable ユーザーが要素を編集できるかどうかを示す列挙型プロパティです。可能であれば、ブラウザは要素のコンポーネントを変更して編集できるようにします。

この属性の相性は悪くない!

しかし設定に問題があるcontenteditable = true的元素,可以编辑了,但是无法使用vue中的v-model实现响应式!

所以我们需要手动实现,使用v-html +  input 事件就可以模拟v-model

参考

contenteditable 要素はどのようにして「双方向バインディング」を実現しますか? - ナゲット

おすすめ

転載: blog.csdn.net/qq_17335549/article/details/131898251