如何在VueJS中实现Medium风格的选段评论界面？

我刚好折腾过类似的需求，给你几个实用的方向，都是不需要依赖jQuery、适配Vue的方案：

1. 原生JS + Vue自定义指令（零第三方依赖） #

这是最灵活的方式，完全自己掌控逻辑，没有额外依赖：

• 写一个自定义指令v-commentable，绑定到文章内容容器上
• 在指令的mounted钩子中监听mouseup（或移动端的touchend）事件，用window.getSelection()获取用户选中的文本范围
• 通过Range API把选中的文本包裹在一个带唯一ID的<span>标签里，添加高亮样式
• 弹出评论输入框，提交时把评论内容和这个高亮块的ID、选中的文本内容关联存储
• 渲染评论时，根据ID找到对应的高亮块，显示关联的评论列表

核心逻辑示例（Vue3自定义指令）：

app.directive('commentable', {
  mounted(el) {
    el.addEventListener('mouseup', () => {
      const selection = window.getSelection();
      if (selection.toString().trim()) {
        const range = selection.getRangeAt(0);
        const highlightSpan = document.createElement('span');
        highlightSpan.id = `comment-highlight-${Date.now()}`;
        highlightSpan.className = 'highlighted-text';
        range.surroundContents(highlightSpan);
        // 唤起评论输入组件，传递高亮块ID和选中文本
        el.dispatchEvent(new CustomEvent('text-selected', {
          detail: {
            id: highlightSpan.id,
            text: selection.toString()
          }
        }));
      }
    });
  }
});

2. 选择维护活跃的Vue专用组件库 #

如果不想自己从零写，可以找近期更新的Vue组件：

• 去npm上筛选标签包含vue、comment、highlight的包，优先看近1-2年有更新的项目
• 不少基于Vue3的组件已经封装好了选中文本、高亮、评论关联的完整逻辑，直接引入就能用，且完全不依赖jQuery
• 选的时候注意看文档，确认是否支持自定义高亮样式、评论数据的自定义存储（比如对接你的后端接口）

3. Vue3 Composition API封装可复用逻辑 #

如果用的是Vue3，推荐把评论相关逻辑封装成组合式函数（Composable），比如useTextComment：

• 这个函数可以封装选中文本处理、高亮元素管理、评论列表增删查改的全流程逻辑
• 在需要的组件中直接导入使用，代码更模块化，也方便后续扩展编辑评论、删除高亮这类功能

额外注意点 #

• 存储评论时，建议同时保存高亮文本在文章中的位置信息（比如用data-*属性标记，或者记录相对于容器的偏移量），避免页面重新渲染后高亮和评论的关联丢失
• 移动端要适配触摸选中文本的逻辑，原生window.getSelection()在移动端也能正常工作，只需注意事件监听的时机

内容的提问来源于stack exchange，提问作者user2799827