vue 实现双击编辑

vue 实现双击编辑

使用 v-on 监听双击事件

通过 v-on:dblclick 或 @dblclick 监听元素的双击事件，触发编辑状态。在模板中绑定双击事件，并在方法中切换编辑状态。

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

切换编辑状态

在 Vue 组件的 data 中定义 isEditing 和 content 变量，并通过方法切换编辑状态。双击时设置为编辑模式，失去焦点或按下回车键时退出编辑模式。

<script>
export default {
  data() {
    return {
      isEditing: false,
      content: '双击编辑内容'
    }
  },
  methods: {
    startEditing() {
      this.isEditing = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    stopEditing() {
      this.isEditing = false
    }
  }
}
</script>

自动聚焦输入框

使用 $nextTick 确保 DOM 更新后聚焦输入框。在 startEditing 方法中调用 this.$refs.input.focus()，确保输入框在编辑模式下自动获得焦点。

支持回车确认

通过 @keyup.enter 监听回车键事件，触发 stopEditing 方法。这样用户可以通过回车键快速确认编辑内容。

样式优化

为编辑状态和非编辑状态添加样式区分，提升用户体验。例如，非编辑状态下显示为普通文本，编辑状态下显示为输入框。

<style>
span {
  padding: 5px;
  cursor: pointer;
}
input {
  padding: 5px;
  border: 1px solid #ccc;
}
</style>

完整示例

将上述代码整合为一个完整的 Vue 组件，实现双击编辑功能。用户双击文本进入编辑模式，编辑完成后通过失去焦点或回车键退出编辑模式。

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

<script>
export default {
  data() {
    return {
      isEditing: false,
      content: '双击编辑内容'
    }
  },
  methods: {
    startEditing() {
      this.isEditing = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    stopEditing() {
      this.isEditing = false
    }
  }
}
</script>

<style>
span {
  padding: 5px;
  cursor: pointer;
}
input {
  padding: 5px;
  border: 1px solid #ccc;
}
</style>