vue3【实战】可撤销重做的 input 输入框

效果预览

实现思路

• 用 list 数组保存每次输入后输入框的值（响应 input 事件）
• 用 indexRef 作为指针，指向当前 list 数组中对应当前输入框的值
• 撤销时，指针左移
• 重做时，指针右移
• 输入时，对 list 数组按指针+1做截取，清除被撤销掉的输入框的值
• 用 disabled 属性控制撤销和重做按钮的边界情况
• 用 focus 避免失焦

代码实现

<template>
  <div>
    <!-- 4-5行代码仅供调试使用 -->
    <!-- <p>indexRef 的值：{{ indexRef }}</p>
    <p>list 的值：{{ list }}</p>
    <p>list.length 的值：{{ list.length }}</p> -->

    <input ref="inputRef" type="text" @input="inputStr" v-model="valueRef" />
    <button @click="undo" :disabled="indexRef < 0">撤销</button>
    <button @click="redo" :disabled="indexRef === list.length - 1">重做</button>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

let list = reactive([]);
let indexRef = ref(-1);
let valueRef = ref("");
let inputRef = ref(null);

let inputStr = () => {
  list.length = indexRef.value + 1;
  list.push(valueRef.value);
  indexRef.value++;
};

function undo() {
  indexRef.value--;
  valueRef.value = list[indexRef.value];
  // 自动聚焦到输入框，避免失焦
  inputRef.value.focus();
}

let redo = () => {
  indexRef.value++;
  valueRef.value = list[indexRef.value];
  // 自动聚焦到输入框，避免失焦
  inputRef.value.focus();
};
</script>