如何在VueJS中实现中型注释界面 [英] How to implement Medium-style commenting interface in VueJS

问题描述

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

I really like the commenting interface employed by Medium, allowing users to highlight a portion of an article and comment on that specific part.

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

I would like to implement a similar commenting facility in a VueJS app.

我发现此软件包的功能类似: http://aroc.github.io/side-comments-demo/，但我想尝试查找最近更新的内容.另外，它需要jquery，我目前不使用它，并且如果可能的话，我希望避免添加该依赖项.

I found this package which does something similar: http://aroc.github.io/side-comments-demo/, but I want to try to find something that has been updated more recently. Also, it requires jquery, which I don't currently use and I would like to avoid adding that dependency if possible.

我很想知道是否有人看到过可以帮助您的东西.

I would love to know if anyone has seen anything that could help.

推荐答案

我在在这里，我将注释组件添加到根组件，以便全局可用.在组件mount()钩子上，我将mouseup方法附加到window对象，在该对象上，使用

检查所有选择

Here I am adding the comments component to the root component such that it is available globally. On component mount() hook, I am attaching a mouseup method to the window object where any selections done are checked using

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

一旦有了选择，页面上的位置就会根据选择位置及其尺寸进行计算，并相应地放置浮动注释部分.

Once we do have a selection, the position on the page is calculated using the selection position and its dimensions and the floating comments component is positioned accordingly.

我们可以使用

window.getSelection().toString();

我建议您仔细检查沙盒，因为有很多事情不在此答案中.

I would advise you to go through the sandbox as there are a lot of things going on which are not in this answer.

这篇关于如何在VueJS中实现中型注释界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！