最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】vue-element-admin升级到Element-UI 2.0.1后:点击按钮有蓝色边框显示

Vue crifan 29浏览 0评论

折腾:

【部分解决】把vue-element-admin的ElementUI的版本从1.4升级到最新的2.0

期间,点击按钮,会显示蓝色边框,很难看:

需要去解决此问题。

且注意到:之前vue-element-admin中为何没有此问题

而现在升级了element-ui到2.0.1后

以及vue到2.5.2后

出现此问题。

element-ui 按钮 点击 蓝色边框

Button 按钮的点击时候出现蓝色边框 – CSDN博客

<code>* {
  outline: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}
</code>

css去掉button点击后的蓝框 – CSDN博客

所以感觉不应该仅仅是去加:

button{

    outline:none;

}

Element 2.0 正式发布 · Issue #7755 · ElemeFE/element

“upload组件在chrome浏览器上点击的时候会出现蓝色的边框。。。这个解决一下啊之前在测试版本就这样。 @Leopoldthecoder

难道是element-ui官网库本身的问题。

先去想办法,找到全局加载css配置的地方,去试试那个配置

看到此处已经在:

src/styles/index.scss

有了配置:

a:focus,
a:active {
outline: none;
}

所以去加上:

:focus {
outline: 0;
}

结果就可以了:

【总结】

Element-UI的最新的2.0(2.0.1/2.0.2)的按钮,在点击(获得焦点的时候)会出现蓝色边框

解决办法是:

(给此处的

vue-element-admin的模板:

https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control

中的

src/styles/index.scss

加上css配置:

:focus {
  outline: 0;
}

即可。

表示:当各种组件,包括此处的按钮,(被点击后)获得焦点时,外部边框为空(不显示蓝色边框)。

转载请注明:在路上 » 【已解决】vue-element-admin升级到Element-UI 2.0.1后:点击按钮有蓝色边框显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
18 queries in 0.254 seconds, using 10.26MB memory