效果预览
实现思路
- 用 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>
