Vue 3实现带行号输入框的完整指南

1. 带序号输入框的实现思路解析

在Web开发中，我们经常需要实现类似代码编辑器的带行号输入区域。这种设计不仅美观，还能帮助用户快速定位内容位置。本文将详细介绍如何使用Vue 3和Element Plus实现一个功能完善的带序号输入框组件。

这个组件的核心功能包括：

• 自动生成行号并保持同步
• 支持动态添加/删除行
• 智能处理回车键和退格键
• 响应式内容更新
• 良好的移动端适配

2. 技术选型与项目结构

2.1 为什么选择Vue 3 + Element Plus

Vue 3的Composition API提供了更好的代码组织和复用性，特别适合这种需要复杂交互的组件。Element Plus的el-scrollbar组件则为我们提供了美观且性能优异的滚动区域。

javascript复制import { ref, computed, onMounted, nextTick } from "vue";

提示：使用nextTick确保DOM更新完成后再进行操作，这是Vue开发中的常见技巧。

2.2 组件文件结构

标准的单文件组件(SFC)结构包含三个部分：

• <template>：定义组件模板
• <script setup>：使用Composition API编写逻辑
• <style scoped>：组件级样式，避免污染全局样式

3. 核心功能实现详解

3.1 数据模型设计

我们使用lines数组来管理所有行的数据：

javascript复制const lines = ref([]);
const lineRefs = ref([]);
const currentLineIndex = ref(0);

每行数据包含两个属性：

• number：行号（从1开始）
• content：行内容

lineRefs数组用于保存每行内容的DOM引用，便于直接操作DOM。

3.2 行管理功能实现

3.2.1 添加新行

javascript复制const addLine = (content = "", focus = true) => {
  const lineNumber = lines.value.length + 1;
  const newLine = {
    number: lineNumber,
    content: content
  };

  lines.value.push(newLine);

  if (focus) {
    nextTick(() => {
      focusLine(lineNumber);
      if (lineRefs.value[lineNumber - 1]) {
        lineRefs.value[lineNumber - 1].innerText = content;
      }
    });
  }

  return lineNumber;
};

注意：使用nextTick确保DOM更新完成后再聚焦新行，避免聚焦失败。

3.2.2 删除行

javascript复制const deleteLine = lineNumber => {
  if (lineNumber <= 1) return;
  const lineIndex = lineNumber - 1;

  lines.value.splice(lineIndex, 1);

  // 更新剩余行号
  for (let i = lineIndex; i < lines.value.length; i++) {
    lines.value[i].number = i + 1;
    lineRefs.value[i].innerText = lines.value[i].content;
  }
  
  lineRefs.value.splice(lineIndex, 1);
  
  if (lineIndex > 0) {
    nextTick(() => {
      focusLine(lineIndex);
    });
  }
};

3.3 键盘事件处理

键盘交互是这类组件的核心，我们主要处理以下几种按键：

javascript复制const onKeyDown = (event, lineNumber) => {
  // Enter键
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    const currentContent = event.target.innerText;
    const lineIndex = lineNumber - 1;
    if (lines.value[lineIndex]) {
      lines.value[lineIndex].content = currentContent;
    }
    addLine();
  }
  // Shift+Enter
  else if (event.key === "Enter" && event.shiftKey) {
    event.preventDefault();
    document.execCommand("insertLineBreak");
  }
  // Backspace键
  else if (
    event.key === "Backspace" &&
    event.target.innerText === "" &&
    lineNumber > 1
  ) {
    event.preventDefault();
    deleteLine(lineNumber);
  }
  // Tab键
  else if (event.key === "Tab") {
    event.preventDefault();
    document.execCommand("insertText", false, "    ");
  }
};

4. 样式设计与优化

4.1 基础样式设置

scss复制.numbered-input {
  width: 100%;
  height: 130px;
  padding: 8px 11px;
  overflow: hidden;
  font-size: 14px;
  line-height: 30px;
  word-wrap: break-word;
  white-space: pre-wrap;
  outline: none;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

4.2 行号与内容区样式

scss复制.line {
  position: relative;
  display: flex;
  margin-bottom: 8px;
}

.line-number {
  min-width: 30px;
  padding-right: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e93;
  text-align: right;
  user-select: none;
}

.line-content {
  flex: 1;
  min-height: 24px;
  padding-left: 10px;
  word-break: break-word;
  white-space: pre-wrap;
  outline: none;
  border-left: 1px solid #f0f0f0;
}

4.3 移动端适配

scss复制@media (width <= 768px) {
  .numbered-input {
    min-height: 200px;
  }

  .actions {
    flex-direction: column;
  }
}

5. 实用技巧与常见问题

5.1 光标位置控制

javascript复制const placeCursorAtEnd = element => {
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(element);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
};

技巧：在内容更新后调用此函数，确保光标始终位于行末。

5.2 内容清理策略

javascript复制const onLineInput = (event, lineNumber) => {
  const element = event.target;
  const textContent = element.textContent || element.innerText;
  const cleanContent = textContent
    .replace(/[\n\r]/g, "")
    .replace(/\s+/g, " ")
    .trim();

  if (element.innerHTML !== cleanContent) {
    element.innerText = cleanContent;
    placeCursorAtEnd(element);
  }

  const lineIndex = lineNumber - 1;
  if (lines.value[lineIndex]) {
    lines.value[lineIndex].content = cleanContent;
  }
};

5.3 常见问题排查

1. 行号不更新：确保在删除行后正确更新剩余行的number属性
2. 焦点丢失：使用nextTick确保DOM更新完成后再操作焦点
3. 移动端显示异常：检查媒体查询是否正确应用
4. 内容包含HTML标签：使用innerText而非innerHTML避免XSS风险

6. 性能优化建议

1. 虚拟滚动：对于大量行内容，考虑实现虚拟滚动
2. 防抖处理：对高频触发的事件（如input）添加防抖
3. 选择性更新：只在内容实际变化时更新响应式数据
4. 内存管理：及时清理不再使用的DOM引用

这个带序号输入框组件已经在我多个项目中稳定运行，特别适合需要多行文本输入且要求行号显示的场合。根据实际需求，你还可以扩展以下功能：

• 语法高亮
• 行折叠
• 多光标支持
• 历史记录撤销/重做