Vue3使用contenteditable打造定制化输入
更新时间：2023年12月08日 09:00:09 作者：coderzry
contenteditable 属性为网页开发者提供了一种灵活的方式来创建可编辑的内容区域,使用户可以直接在网页上进行内容编辑,而无需依赖传统的输入框,本文将利用contenteditable打造定制化输入,感兴趣的可以了解下
定义
全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。
该属性必须是下面的值之一：
- true 或空字符串，表示元素是可编辑的。
- false 表示元素不是可编辑的。
- plaintext-only 表示元素的原始文本是可编辑的，但富文本格式会被禁用。
contenteditable是一个 HTML 属性，可以应用于 HTML 元素，使其成为可编辑的区域。通过使用contenteditable属性，可以实现在网页中编辑文本内容的功能，类似于在富文本编辑器中进行编辑。
主要特点
可以实现富文本编辑功能，包括插入图片、编辑文字样式（如加粗、斜体、下划线等）、创建链接等。
允许用户在网页中直接编辑文本内容，而无需使用表单输入框或富文本编辑器。
可以与 JavaScript 事件结合使用，如input事件、keydown事件等，以便在用户输入时进行相应的处理。
项目实战
最近遇到一个需求，要求表格的内容可编辑，项目使用的 vue3.2 版本。其实这个需求使用input也可以实现，但是还得各种覆盖样式，很早之前也听说过contenteditable这个属性，这次正好借机体验一下，废话不多说，直接封装一个组件。
template 部分
<template> <span contenteditable :innerHTML="content" @input="updateContent" class="custom-contenteditable"></span> </template>
Js部分
<script setup>
import { ref, watch } from 'vue';
const props = defineProps(['content']);
const emit = defineEmits(['update:content']);
const content = ref(props.content);
const updateContent = (event) => {
event.target.innerText = event.target.innerText.replace(/\D/g, ''); // 过滤非数
content.value = event.target.innerText;
emit('update:content', Number(event.target.innerText));
};
watch(() => props.content, (newValue) => {
content.value = newValue;
});
</script>
CSS 部分
<style lang="scss" scoped>
.custom-contenteditable {
box-sizing: border-box;
border: 1px solid transparent;
&:focus {
outline: 0px;
border: 1px solid rgb(24, 144, 255) !important;
}
&:hover {
border: 1px dashed #aaaaaa;
transition: all .5s;
}
}
</style>
组件使用
<ContentEditable v-model:content="item.data" />
最终实现效果
可以看到，加上一些样式还是很丝滑的，由于需求原因，只能输入数字，因此在@input事件中将输入值过滤了一遍。如果需要其他格式的，可以对组件进一步封装，拓展对应的props即可。
注意事项
在使用时需要格外小心，因为用户可以在可编辑区域中插入任意 HTML 和 JavaScript 代码，可能导致安全风险。
因为浏览器对 contenteditable 的实现可能存在差异，因此在跨浏览器兼容性方面需要注意。
其他适用场景
- 富文本编辑器
- 内容管理系统
- 用户自定义页面
- 电子邮件编辑
浏览器兼容性
到此这篇关于Vue3使用contenteditable打造定制化输入的文章就介绍到这了,更多相关Vue3 contenteditable内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了el-table和jsplumb实现连线功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了Vuex 使用及简单实例(计数器)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文是小编给大家收藏整理的关于vue项目前端知识点，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
Pycharm中开发vue element项目时eslint的安装和使用步骤
这篇文章主要介绍了Pycharm中开发vue element项目时eslint的安装和使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue+Openlayer加载动画效果的实现代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-08-08
今天小编就为大家分享一篇Vue前后端不同端口的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法
使用Vue时我们前端如何处理后端返回的文件流,下面这篇文章主要给大家介绍了关于vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了vue+elementui实现下拉表格多选和搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要为大家详细介绍了Vue+Element-UI实现上传图片并压缩功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
本文主要介绍了Vue极简生成器 Vuepress的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>2022-06-06
最新评论