fritx/vue-at

创建一个@区域，移动滚动条再输入@会导致@弹出层位置计算偏移 BUG

Closed this issue · 19 comments

daomiaru commented

正常打开页面不拖动滚动条时，输入@位置计算正确，但是当拖动滚动条时@弹出层的位置就变了。大佬可不可以看一下

fritx commented

@daomiaru hi，抱歉，可否提供你的demo，可能和这个已有的issue有关 #10

daomiaru commented

插件下载是这个npm i vue-at@2.x # for Vue2。

daomiaru commented

代码


	</div>
	  <at :members="members" name-key="name">
	    <template slot="item" slot-scope="s">
	      <img :src="s.item.avatar">
	      <span v-text="s.item.name"></span>
	    </template>
	    <div class="editor"  contenteditable></div>
	  </at>
	  <div style="height: 1000px;"></div>
</div>
<script> import At from 'vue-at' export default{ components: { At }, data(){ return{ members: [{ avatar: 'https://randomuser.me/api/portraits/men/2.jpg', name: 'myrtie.green' }, { avatar: 'https://randomuser.me/api/portraits/men/8.jpg', name: '椿木' }] } } } </script> <style lang="scss"> .editor { width: 400px; height: 200px; overflow: auto; white-space: pre-wrap; border: solid 2px rgba(0,0,0,.5); } /* override styles */ #app .atwho-li { padding: 0 4px; } #app .atwho-li img { height: 100%; width: auto; -webkit-transform: scale(.8); } #app .atwho-li span { padding-left: 8px; } #app .atwho-wrap { display: inline-block; vertical-align: top; margin-left: 40px; margin-top: 30px; } </style>

daomiaru commented

老哥我看了一下好像是我现在用的这个框架可能是设置了什么css的原因导致浏览器滚动事件包括window.pageYOffset都失效了导致弹出层位置偏移。我把框架的地址给你你可以帮我看看该怎么改吗 https://gitee.com/smallc/Saber. 麻烦大佬了

daomiaru commented

解决了谢谢大哥

KingOneYan commented

@daomiaru 兄弟，我也遇到了一摸一样的问题，能否请教一下怎么解决

daomiaru commented

@daomiaru 兄弟，我也遇到了一摸一样的问题，能否请教一下怎么解决

源码中有个scrollRef属性，你f12审查元素查看滚动条是哪个，把这个滚动条传入就行了
QQ截图20201022141826

KingOneYan commented

@daomiaru 兄弟，我也遇到了一摸一样的问题，能否请教一下怎么解决

源码中有个scrollRef属性，你f12审查元素查看滚动条是哪个，把这个滚动条传入就行了
QQ截图20201022141826

没能理解，是传入滚动条对应的元素的类名吗，还是应该说传对应的ref，但是我目前使用的是封装好的富文本，里面内容滚动条拿不到对应的ref，我目前传className不起作用

daomiaru commented

@daomiaru 兄弟，我也遇到了一摸一样的问题，能否请教一下怎么解决

源码中有个scrollRef属性，你f12审查元素查看滚动条是哪个，把这个滚动条传入就行了
QQ截图20201022141826

没能理解，是传入滚动条对应的元素的类名吗，还是应该说传对应的ref，但是我目前使用的是封装好的富文本，里面内容滚动条拿不到对应的ref，我目前传className不起作用

QQ截图20201022143355

KingOneYan commented

@daomiaru 没能理解，是传入滚动条对应的元素的类名吗，还是应该说传对应的ref，但是我目前使用的是封装好的富文本，里面内容滚动条拿不到对应的ref，我目前传className不起作用

daomiaru commented

@daomiaru 兄弟，我也遇到了一摸一样的问题，能否请教一下怎么解决

源码中有个scrollRef属性，你f12审查元素查看滚动条是哪个，把这个滚动条传入就行了
QQ截图20201022141826

没能理解，是传入滚动条对应的元素的类名吗，还是应该说传对应的ref，但是我目前使用的是封装好的富文本，里面内容滚动条拿不到对应的ref，我目前传className不起作用

QQ截图20201022143355

源码部分

daomiaru commented

@daomiaru 没能理解，是传入滚动条对应的元素的类名吗，还是应该说传对应的ref，但是我目前使用的是封装好的富文本，里面内容滚动条拿不到对应的ref，我目前传className不起作用

你截个图吧

KingOneYan commented

@daomiaru 当前是这个DOM 结构
image
template结构是这样的
image

daomiaru commented

@daomiaru 当前是这个DOM 结构
image
template结构是这样的
image

老哥你图裂了

KingOneYan commented

@daomiaru 老哥，图片不知道为什么怎么样都发不出来了，可以加你QQ私聊吗

daomiaru commented