javascript - 如何在 VueJS 中实现 Medium 风格的评论界面

Question

我真的很喜欢 Medium 使用的评论界面，它允许用户突出显示文章的一部分并评论该特定部分。

我想在 VueJS 应用程序中实现类似的评论功能。

我发现这个包做了类似的事情：http: //aroc.github.io/side-comments-demo/，但我想尝试找到最近更新的东西。此外，它需要 jquery，我目前不使用它，如果可能的话，我想避免添加该依赖项。

我很想知道是否有人看到任何可以提供帮助的东西。

Answer 1

我在https://codesandbox.io/s/medium-style-text-select-comment-box-h5o9r创建了一个示例

在这里，我将注释组件添加到根组件中，以便它在全球范围内可用。在组件mount()挂钩上，我将一个mouseup方法附加到对象，在该window对象上使用检查完成的任何选择

if (window.getSelection() && !window.getSelection().isCollapsed) {
    //execute only with the getSelection() method is available 
    //and the current selection is not collapsed
}

一旦我们有了选择，页面上的位置就会使用选择位置及其尺寸来计算，浮动评论组件也会相应地定位。

我们可以使用

window.getSelection().toString();

我建议您通过沙箱，因为有很多事情不在这个答案中。