有使用 vue-element-admin 的朋友遇到过“显示选中”这个奇怪的问题吗?

2021-09-15 09:00:21 +08:00
 coolair
https://github.com/PanJiaChen/vue-element-admin

问题描述:点击系统布局设置(右侧蓝色设置按钮)中的“侧边栏 Logo”,鼠标快速反复切换,在显示 Logo 的同时,会选中 Logo 图片和文字。但是只在 Chrome 系浏览器有此问题,Firefox 没有。



我发现 vue-element-admin 官方预览是没有问题的,对比后发现他部署的 deploy 库的 public/index.html 文件多个一行 script 的引入:

<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7IK5QY&placement=panjiachengithubio" id="_carbonads_js"></script>

去掉这个就会有同样的问题了。

问题复现可使用如下地址(右上角头像-布局设置-显示 Logo ):
https://demo.django-vue-admin.com/


同时,我看了其他使用 vue-element-admin 做的项目,比如:
http://vue.ruoyi.vip/login?redirect=%2Findex
https://el-admin.xin/login?redirect=%2Fmonitor%2Fserver
都没有这个问题。

在我测试的时候,我把 RightPanel 这个遮罩层组件去了,直接把设置按钮放在页面上,发现就没有问题了。

请问下各位大佬,这个是不是点击穿透导致选中了,那为啥官方的演示部署版本加了个脚本引入就没问题了呢?
虽然这个问题无关紧要,但是还是想知道这个问题该如何解决?谢谢。
725 次点击
所在节点    问与答
2 条回复
Vegetable
2021-09-15 09:52:35 +08:00
成因不确定,但是解决挺简单的

前端开发中,对于这种显然不应该出现选中状态的内容,添加禁止选中是一个好习惯。

.sidebar-logo-container {
user-select: none;
}
coolair
2021-09-15 10:31:57 +08:00
@Vegetable 这样确实可以解决,感谢!

同时我发现另外两个项目没问题是因为:这个 Logo 设置按钮不是侧边栏最后一个元素,如果放最后也会有问题。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/801898

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX