Vue动态下拉框与值获取技巧

有志者，事竟成！如果你在学习文章，那么本文《Vue实现编辑区动态下拉框与值获取方法》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文详解如何在 Vue 应用中，于 `contenteditable` 区域任意光标位置插入响应式下拉框（`<select>`），并通过数据绑定确保多下拉框状态独立、选中值准确获取，避免手动 DOM 操作导致的状态丢失问题。</select>

在 Vue 开发中，直接操作 DOM（如 document.createElement + appendChild）插入 <select> 到 contenteditable 区域虽能实现视觉效果，但会严重破坏 Vue 的响应式机制：新插入的原生 <select> 未与 Vue 实例数据建立绑定，其 v-model 缺失，导致 getDataModel() 获取的永远是初始值（如第一个选项），而非用户真实选择。

根本解法：放弃手动 DOM 插入，改用声明式渲染 + 光标定位逻辑

虽然 Vue 官方不直接支持“在 contenteditable 光标处插入 Vue 组件”，但我们可通过组合策略实现高保真体验：

✅ 推荐架构：混合模式（文本段落 + 内联组件占位符）

将编辑区域抽象为「富文本片段数组」，每个片段为纯文本或下拉框组件实例，并通过 v-for 渲染。配合光标定位 API，实现“点击按钮时，在当前光标位置插入新下拉框”。

以下是优化后的完整实现（Vue 2/3 均适用，以 Vue 2 为例）：

<template>
  <div>
    <!-- 可编辑区域：仅用于纯文本输入（禁用下拉框交互） -->
    <div 
      class="content-editable" 
      contenteditable="true" 
      @input="handleTextUpdate"
      @click="saveCursorPosition"
      ref="editor"
      v-html="renderedContent"
    ></div>

    <!-- 下拉框插入按钮 -->
    <button @click="insertDropdownAtCursor">+ 插入下拉框</button>

    <!-- 数据导出 -->
    <button @click="exportDataModel">Get Data Model</button>

    <!-- 当前数据模型（调试用） -->
    <pre>{{ dataModel }}