vue 实现双击编辑

实现双击编辑功能的步骤

1. 监听双击事件 在需要双击编辑的元素上添加@dblclick事件监听器，触发编辑状态。

<div @dblclick="startEditing">{{ isEditing ? '' : text }}</div>

1. 切换编辑状态 在Vue的data或setup中定义isEditing状态和text内容，双击时切换状态。

data() {
  return {
    isEditing: false,
    text: '双击编辑内容'
  }
},
methods: {
  startEditing() {
    this.isEditing = true
  }
}

1. 显示输入框 当isEditing为true时，显示输入框代替文本内容。

<input 
  v-if="isEditing"
  v-model="text"
  @blur="stopEditing"
  @keyup.enter="stopEditing"
  ref="input"
>

1. 自动聚焦输入框 使用$nextTick和ref确保输入框显示后自动获得焦点。

startEditing() {
  this.isEditing = true
  this.$nextTick(() => {
    this.$refs.input.focus()
  })
}

1. 结束编辑 通过blur事件或回车键确认编辑，退出编辑状态。

stopEditing() {
  this.isEditing = false
}

1. 样式优化 添加CSS使交互更直观，比如输入框宽度匹配文本长度。

input {
  width: 100%;
  box-sizing: border-box;
}

完整组件示例

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

<script>
export default {
  data() {
    return {
      isEditing: false,
      text: '默认文本'
    }
  },
  methods: {
    startEditing() {
      this.isEditing = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    stopEditing() {
      this.isEditing = false
    }
  }
}
</script>

进阶优化

1. 添加取消功能 ESC键恢复原始文本，需监听keyup.esc事件。

@keyup.esc="cancelEditing"

1. 保存原始值 编辑前保存原始值以便取消时恢复。

startEditing() {
  this.originalText = this.text
  // 其他逻辑...
},
cancelEditing() {
  this.text = this.originalText
  this.isEditing = false
}

1. 全局指令实现 封装为可复用的指令。

Vue.directive('editable', {
  bind(el, binding, vnode) {
    // 实现逻辑
  }
})

1. 表单验证 编辑内容时添加验证逻辑。

stopEditing() {
  if (this.text.trim() === '') {
    alert('内容不能为空')
    return
  }
  this.isEditing = false
}