vue中使用contenteditable属性

原创已于 2023-05-18 14:08:45 修改 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-05-17 15:45:13 首次发布

vue2 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了如何利用HTML的contenteditable属性创建可编辑的元素，并在Vue框架中实现数据的变化监听。通过在div元素上设置contenteditable属性并配合blur事件，可以捕获内容修改，更新Vue的数据。然而，单纯更新数据会导致innerText与数据不同步，需要额外设置innerText以保持一致。

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
}

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