vue中的可编辑div

Posted 2023-02-21

参考技术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方法