contenteditable属性,可以把一个标签变为可编辑状态,完美解决了一些没必要用到input的业务场景,但在vue中,这种编辑状态没有被vue去监听到,导致值的变化并没有影响数据,这篇文章主要通过简单的方式来实现效果,涉及到业务复杂点的,可以综合一下!
如何使用
<div contenteditable="true">我是可以编辑的div</div>
用法很简单,主要加上属性,赋值为true或者空字符就可以完成效果,如果涉及到一些二次编辑不可更改的情况,将值变为false即可。
vue中实现数据变化
作为可编辑状态,页面是可以完美更新的,所以只考虑如何更改数据即可。
由于编辑时,可以触发很多事件,例如失焦,键盘事件等,可以通过多种事件实现,具体通过实际业务。这里只介绍blur事件。
<div contenteditable="true" @blur="edit(源数据, $event)">我是可以编辑的div</div>
edit (val, e) {
val.text = e.target.innerText
}
很简单,但是如果你用的其他方法,你会发现,当你编辑or删除的时候,你的光标会跑到文字的最前面,如果你的业务很简单,用失焦事件即可,如果还有其他要求导致用到了其他事件,那你可以参考window上的getSelection方法来重新去定你的光标。
2023-05-18 更新
使用后,发现一个问题,我的数据是更新了,但是原本的innerText还是存在,它会把两个内容合在一起,所以要加一行代码
edit (val, e) {
val.text = e.target.innerText
e.target.innerText = val.text
}
具体为什么出现这个问题还不清楚,找到了回来补充