【Vue】div标签实现输入框，利用contenteditable=“true“属性的标签实现

**Vue 中 div 标签实现输入框**

在 Vue 应用中，我们经常需要创建输入框来收集用户的输入。然而，传统的 `input` 元素可能无法满足所有需求。在这种情况下，我们可以使用 `div` 元素并设置 `contenteditable="true"` 属性来实现输入框功能。

**什么是 contenteditable="true"**

`contenteditable="true"` 是一个 HTML 特性，它允许用户直接编辑元素的内容，而不需要使用 `input` 或其他控件。这种特性非常有用，特别是在需要创建自定义输入控件或实现富文本编辑功能时。

**如何在 Vue 中使用 contenteditable="true)**要在 Vue 中使用 `contenteditable="true"`,我们只需将该属性添加到 `div` 元素中即可。例如：

html<div v-model="inputValue" contenteditable="true"></div>

这里，我们使用了 `v-model` 指令来绑定 `inputValue` 变量，这样就可以在 Vue 中响应用户的输入。

**示例代码**

下面是一个完整的示例：

html<template>
 <div>
 <h1>Vue div 输入框</h1>
 <div v-model="inputValue" contenteditable="true"></div>
 <p>当前输入值：{{ inputValue }}</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
 inputValue: ''
 }
 }
}
</script>

在这个示例中，我们创建了一个 `div` 元素，并将 `contenteditable="true"` 属性添加到它上面。我们还使用了 `v-model` 指令来绑定 `inputValue` 变量。

**如何获取输入值**

要获取用户的输入值，我们可以在 Vue 中使用 `$event`事件对象。例如：

html<div v-on:input="handleInput" contenteditable="true"></div>

然后，在组件中，我们可以定义一个 `handleInput` 方法来处理输入事件：

javascriptmethods: {
 handleInput(event) {
 this.inputValue = event.target.textContent }
}

在这个示例中，我们使用了 `$event`事件对象来获取用户的输入值，然后将其赋值给 `inputValue` 变量。

**如何实现富文本编辑功能**

要实现富文本编辑功能，我们可以使用第三方库，如 Quill 或 Slate。例如：

html<div ref="editor" contenteditable="true"></div>

然后，在组件中，我们可以定义一个 `mounted` 钩子函数来初始化富文本编辑器：

javascriptmounted() {
 const editor = new Quill(this.$refs.editor, {
 modules: {
 toolbar: []
 },
 placeholder: '请输入内容...',
 theme: 'snow'
 })
}

在这个示例中，我们使用了 Quill 库来创建富文本编辑器，并将其绑定到 `editor` 变量上。

**总结**

在 Vue 中，使用 `div` 元素并设置 `contenteditable="true"` 属性可以实现输入框功能。我们还可以使用 `$event`事件对象和第三方库来获取输入值和实现富文本编辑功能。