首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 contenteditable

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！