如何在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();

我会建议您通过沙箱进行检查，因为有很多事情正在发生，但此答案中没有。

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

How to implement Medium-style commenting interface in VueJS

javascript

comments

vue.js

medium.com