vue中使用contenteditable属性

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
}

具体为什么出现这个问题还不清楚，找到了回来补充