input框长文本canvas生成图片文字不换行的问题

开发中遇到一个问题, 管理后台的一个页面需要在提交时生成图片给领导审核, 但是在页面中有一个备注栏使用的input, 有时候会遇到超长文本备注,在生成图片之后, 备注栏的文字无法换行, 导致无法完整看到备注的文本内容, 这是canvas库本身对于css的支持不够导致的, 因此想到了使用div模拟input输入框来解决这个问题

1.模版中的HTML代码

<div class="input-like" :contenteditable="true" @input="changeRemarks">
     {{ remarks }}
</div>
// 备注: `:contenteditable="true"` 是HTML的一个属性，主要用于可编辑元素（如 `<div>`、`<p>` 或 `<span>` 等）上，它赋予用户直接在浏览器中对指定区域文本进行实时编辑的能力。当这个属性设置为`true`时，网页上的这部分内容变成了一个富文本区域，允许用户输入、删除、格式化文本，就像在普通文本编辑器里一样。

2.JS代码

这里直接把div模拟的input输入框的change事件放上来, 这个方法的操作就是为了解决文本双向绑定以及鼠标的光标能够跟随文本, canvas生成的图片的方法我就不放了, 这个方法可以直接拿去用

changeRemarks: debounce(function(event) {
  const selection = window.getSelection()
  const range = selection.getRangeAt(0).cloneRange()
  const cursorPosition = range.startOffset
  this.remarks  = event.target.innerText
  this.$nextTick(() => {
     range.collapse(false)
     selection.removeAllRanges()
     selection.addRange(range)
     range.setStart(range.startContainer, cursorPosition)
     range.setEnd(range.endContainer, cursorPosition)
     selection.removeAllRanges()
     selection.addRange(range)
  })
}, 1000),

3.CSS-div模拟input输入框的效果

因为是div模拟的input输入框,所以需要给div在样式上进行设计,使其更像一个input输入框

.input-like {
  border: 1px solid #DCDFE6;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: all 0.3s ease;
  border-radius: 5px;
}
 
/* div模拟input响应式设计 */
@media screen and (max-width: 600px) {
  .input-like {
    font-size: 14px;
  }
}

更新不易, 点个赞呗~