当前位置：首页 > VUE

vue div input框实现

2026-02-23 13:50:14VUE

使用 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 语法：

vue div input框实现

<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>