vue中的可编辑div实现高度自适应

Posted 2023-02-23

参考技术A 根据需求想要一个可以根据文字内容撑开高度，同时延伸背景图（因为我想要一个虚线的效果），textarea无法自适应，用div的可编辑效果contenteditable = true来实现，遇到了几个问题。

1、设置div的初始化高度min-height: 700px;

2、div的内容需要通过@input来绑定e.target.textContent

3、可编辑的div，光标会在输入完成时跳到最前，解决方式是通过range对象的moveStart()函数

vue中的可编辑div

参考技术A 可编辑div可能很简单 contenteditable="true" 就能实现了

但是，，，输入一个字的时候，焦点会自动跳到文本开头，很烦的有木有

在网上看见一个大神写的，引用过来，很久了，忘记了出处

将可编辑div单独设置成一个组件

子组件中

<template>

  <div class="edit" placeholder="11"

      v-html="innerText"

      :contenteditable="canEdit"

      @focus="isLocked =true"

      @blur="isLocked =false"

      @input="changeText">

</template>

watch:

'value'()

if (!this.isLocked && !this.innerText)

this.innerText =this.value;

   



,

methods:

changeText()

this.$emit('input', this.$el.innerHTML);

 

,

父组件中只要 v-model='你想要绑定的数据'

对vue不熟悉，，当然这位大神也说看下官方文档v-model这一块

大致是如果父组件的v-model会首先绑定子组件的emit的input方法