当前位置：首页 > VUE

vue实现双击编辑

2026-01-16 06:28:19VUE

Vue 实现双击编辑功能

基本实现思路

通过监听元素的 dblclick 事件触发编辑状态，结合 v-if 和 v-else 切换显示模式。以下是核心实现方案：

<template>
  <div>
    <span v-if="!isEditing" @dblclick="startEditing">{{ content }}</span>
    <input
      v-else
      ref="inputField"
      v-model="editableContent"
      @blur="stopEditing"
      @keyup.enter="stopEditing"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '双击编辑这段文字',
      isEditing: false,
      editableContent: ''
    }
  },
  methods: {
    startEditing() {
      this.isEditing = true
      this.editableContent = this.content
      this.$nextTick(() => {
        this.$refs.inputField.focus()
      })
    },
    stopEditing() {
      this.isEditing = false
      this.content = this.editableContent
    }
  }
}
</script>

进阶优化方案

自动选中文本 在获得焦点时自动全选输入框内容：

startEditing() {
  this.isEditing = true
  this.editableContent = this.content
  this.$nextTick(() => {
    const input = this.$refs.inputField
    input.focus()
    input.select()
  })
}

ESC 键取消编辑

<input
  v-else
  @keyup.esc="cancelEditing"
/>

cancelEditing() {
  this.isEditing = false
}

封装为可复用组件

创建 EditableText.vue 组件：

vue实现双击编辑

<template>
  <div class="editable-text">
    <slot v-if="!isEditing" name="display" @dblclick="startEditing">
      <span @dblclick="startEditing">{{ value }}</span>
    </slot>
    <slot v-else name="edit">
      <input
        ref="input"
        v-model="editableValue"
        @blur="handleBlur"
        @keyup.enter="handleBlur"
        @keyup.esc="cancelEdit"
      />
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isEditing: false,
      editableValue: this.value
    }
  },
  methods: {
    startEditing() {
      this.isEditing = true
      this.editableValue = this.value
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    handleBlur() {
      this.$emit('input', this.editableValue)
      this.isEditing = false
    },
    cancelEdit() {
      this.isEditing = false
    }
  }
}
</script>

使用示例

<editable-text v-model="textContent" />

样式优化建议

.editable-text {
  display: inline-block;
}
.editable-text span {
  padding: 2px 5px;
  cursor: text;
}
.editable-text input {
  border: 1px solid #ddd;
  padding: 2px 5px;
}