Vue.js 实现双击编辑输入框的详细指南

Vue.js 中实现双击编辑的输入框

问题：

在 Vue.js 应用程序中，你需要让元素在双击时变成可编辑的输入框。

解决方法：

HTML 代码：

使用 v-for 循环遍历元素列表，并为每个元素创建一个 span 元素和一个 input 元素：

<template>
  <div v-for="node in nodes">
    <span :style="{ display: displayTitle }" @dblclick="showInput(node.id)">
      {{ node.title }}
    </span>
    <input :style="{ display: displayTitleInput }" type="text"
      @blur="hideInput1(node.id)" @keydown="hideInput2(node.id, $event)"
      @input="changeTitle(node.id, $event.target.value)"
      :value="node.title">
  </div>
</template>

JavaScript 代码：

在 Vue 实例中，定义 data() 和 methods 选项：

<script>
export default {
  data() {
    return {
      // 跟踪标题文本的显示状态
      displayTitle: {
        [node.id]: "inline-block"
      },
      // 跟踪输入框的显示状态
      displayTitleInput: {
        [node.id]: "none"
      },
    };
  },
  methods: {
    // 在双击时显示输入框
    showInput(id) {
      this.displayTitle[id] = "none";
      this.displayTitleInput[id] = "inline-block";

      // 使用 `$nextTick()` 确保在 DOM 更新后聚焦输入框
      this.$nextTick(() => {
        this.$refs[`titleInput-${id}`].focus();
      });
    },
    // 在输入框失去焦点时隐藏输入框
    hideInput1(id) {
      this.displayTitle[id] = "inline-block";
      this.displayTitleInput[id] = "none";
    },
    // 在按下 Enter 键时隐藏输入框
    hideInput2(id, event) {
      if (event.keyCode === 13) {
        this.hideInput1(id);
      }
    }
  }
};
</script>

步骤：

1. 在 data() 中初始化 displayTitle 和 displayTitleInput 对象，其中每个节点的属性都对应于元素和输入框的显示状态。
2. 在 showInput() 方法中，切换元素和输入框的显示状态，并使用 $nextTick() 确保在 DOM 更新后聚焦输入框。
3. 在 hideInput1() 方法中，在输入框失去焦点时隐藏输入框。
4. 在 hideInput2() 方法中，在按下 Enter 键时隐藏输入框。

常见问题解答：

1. 如何设置输入框的初始值？

在 data() 中将 value 属性绑定到节点

<input :value="node.title">

2. 如何使用键盘导航？

使用 @keydown 事件监听器，例如：

<input @keydown.tab="moveToNextNode()">

3. 如何在保存值之前进行验证？

在 @input 事件监听器中添加验证逻辑，例如：

<input @input="validateInput(node.id, $event.target.value)">

4. 如何自定义输入框的外观？

通过 CSS 设置 displayTitleInput 和 displayTitle 的样式，例如：

.title-input {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
}

5. 如何处理多个同时编辑的输入框？

在 showInput() 方法中跟踪当前正在编辑的输入框的 ID，并只聚焦该输入框。