当前位置：首页 > VUE

vue div input框实现

2026-01-22 23:08:19VUE

实现 Vue 中的 div input 框

在 Vue 中实现一个 div 输入框可以通过多种方式完成，以下是一种常见的方法，结合 contenteditable 属性和 Vue 的数据绑定。

基本实现

创建一个可编辑的 div，并将其内容与 Vue 的数据绑定。

vue div input框实现

<template>
  <div>
    <div 
      contenteditable="true" 
      @input="handleInput"
      v-html="content"
    ></div>
    <p>当前内容: {{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleInput(e) {
      this.content = e.target.innerHTML;
    }
  }
}
</script>

使用 v-model 的自定义组件

如果需要更符合 Vue 的使用习惯，可以创建一个自定义组件，支持 v-model。

vue div input框实现

<template>
  <div>
    <editable-div v-model="content"></editable-div>
    <p>当前内容: {{ content }}</p>
  </div>
</template>

<script>
export default {
  components: {
    'editable-div': {
      props: ['value'],
      template: `
        <div 
          contenteditable="true"
          @input="update"
          v-html="value"
        ></div>
      `,
      methods: {
        update(e) {
          this.$emit('input', e.target.innerHTML);
        }
      }
    }
  },
  data() {
    return {
      content: ''
    }
  }
}
</script>

处理纯文本内容

如果希望处理纯文本而非 HTML，可以使用 textContent 替代 innerHTML。

<template>
  <div>
    <div 
      contenteditable="true" 
      @input="handleInput"
      ref="editableDiv"
    ></div>
    <p>当前内容: {{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleInput() {
      this.content = this.$refs.editableDiv.textContent;
    }
  }
}
</script>

添加样式和交互

为可编辑 div 添加样式和交互效果，提升用户体验。

<template>
  <div>
    <div 
      contenteditable="true" 
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      :class="{ 'editing': isEditing }"
      v-html="content"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      isEditing: false
    }
  },
  methods: {
    handleInput(e) {
      this.content = e.target.innerHTML;
    },
    handleFocus() {
      this.isEditing = true;
    },
    handleBlur() {
      this.isEditing = false;
    }
  }
}
</script>

<style>
div[contenteditable="true"] {
  border: 1px solid #ccc;
  padding: 8px;
  min-height: 20px;
}
div[contenteditable="true"].editing {
  border-color: #42b983;
}
</style>

这些方法可以根据具体需求进行调整，适用于不同的场景。