Vue3使用contenteditable打造定制化输入

　　目录

　　定义

　　全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

　　该属性必须是下面的值之一：

　　主要特点

　　可以实现富文本编辑功能，包括插入图片、编辑文字样式（如加粗、斜体、下划线等）、创建链接等。

　　允许用户在网页中直接编辑文本内容，而无需使用表单输入框或富文本编辑器。

　　可以与 JavaScript 事件结合使用，如事件、事件等，以便在用户输入时进行相应的处理。

　　项目实战

　　最近遇到一个需求，要求表格的内容可编辑，项目使用的 vue3.2 版本。其实这个需求使用input也可以实现，但是还得各种覆盖样式，很早之前也听说过这个属性，这次正好借机体验一下，废话不多说，直接封装一个组件。

　　template 部分

　　Js部分

　　CSS 部分

　　组件使用

　　最终实现效果

　　可以看到，加上一些样式还是很丝滑的，由于需求原因，只能输入数字，因此在事件中将输入值过滤了一遍。如果需要其他格式的，可以对组件进一步封装，拓展对应的props即可。

　　注意事项

　　在使用时需要格外小心，因为用户可以在可编辑区域中插入任意 HTML 和 JavaScript 代码，可能导致安全风险。

　　因为浏览器对 的实现可能存在差异，因此在跨浏览器兼容性方面需要注意。

　　其他适用场景

　　浏览器兼容性

　　到此这篇关于Vue3使用contenteditable打造定制化输入的文章就介绍到这了,更多相关Vue3 contenteditable内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: