vue div input框实现
使用 Vue 实现 div 输入框
在 Vue 中可以通过自定义组件或原生 HTML 实现 div 输入框的效果，以下是两种常见方法：
方法一：使用 contenteditable 属性
通过 HTML5 的 contenteditable 属性可以让 div 具备输入功能，结合 Vue 实现双向绑定：
<template>
<div
contenteditable="true"
@input="handleInput"
v-html="content"
></div>
</template>
<script>
export default {
data() {
return {
content: ''
}
},
methods: {
handleInput(e) {
this.content = e.target.innerHTML
}
}
}
</script>方法二：封装为可复用组件
创建一个可复用的 div 输入框组件：
<template>
<div
class="editable-div"
contenteditable="true"
@blur="updateContent"
ref="editableDiv"
></div>
</template>
<script>
export default {
props: ['value'],
mounted() {
this.$refs.editableDiv.innerHTML = this.value
},
methods: {
updateContent() {
this.$emit('input', this.$refs.editableDiv.innerHTML)
}
},
watch: {
value(newVal) {
if (newVal !== this.$refs.editableDiv.innerHTML) {
this.$refs.editableDiv.innerHTML = newVal
}
}
}
}
</script>
<style>
.editable-div {
min-height: 100px;
border: 1px solid #ddd;
padding: 8px;
outline: none;
}
</style>方法三：结合 v-model 使用
在父组件中使用时支持 v-model 语法：
<template>
<div>
<editable-div v-model="htmlContent"></editable-div>
</div>
</template>
<script>
import EditableDiv from './EditableDiv.vue'
export default {
components: {
EditableDiv
},
data() {
return {
htmlContent: ''
}
}
}
</script>注意事项
contenteditable生成的 HTML 需要特别注意 XSS 防护- 对于复杂需求可能需要添加更多事件处理（如粘贴、按键等）
- 移动端可能需要额外处理焦点和键盘问题
- 样式需自行调整以满足设计需求
以上方法提供了基础的 div 输入框实现，可根据实际需求进行扩展和优化。
