V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
coolair
V2EX  ›  问与答

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

  •  1
     
  •   coolair · 2021-09-15 09:00:21 +08:00 · 672 次点击
    这是一个创建于 1022 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 这个遮罩层组件去了,直接把设置按钮放在页面上,发现就没有问题了。

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

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

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

    同时我发现另外两个项目没问题是因为:这个 Logo 设置按钮不是侧边栏最后一个元素,如果放最后也会有问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3499 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:17 · PVG 12:17 · LAX 21:17 · JFK 00:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.