element-plus [bug report] use CSS vars instead of props

qoefvg9y 于 2022-10-22 发布在其他

关注(0)|答案(7)|浏览(266)

Existing Component

Yes

Component Name

Description

当我传入另一个变量的时候：

<ElMenu
          background-color="var(--mk-aside-bg-color)"
          text-color="var(--mk-aside-text-color)"
          active-text-color="var(--mk-aside-active-color)"
        />

--el-menu-hover-bg-color:rgb(204, 204, 204); 计算错误:

<ul 
  role="menubar" 
  class="el-menu" 
  style="--el-menu-text-color:var(--mk-aside-text-color); --el-menu-hover-text-color:var(--mk-aside-text-color); --el-menu-bg-color:var(--mk-aside-bg-color); --el-menu-hover-bg-color:rgb(204, 204, 204); --el-menu-active-color:var(--mk-aside-active-color);"
></ul>

源码是根据 props.backgroundColor 计算，拿到的值是字符串 var(--mk-aside-bg-color) ，不是颜色值，但是是有效的 css color value，建议改成 window.getComputedStyle(elmenu).getPropertyValue("--el-menu-bg-color")
https://github.com/element-plus/element-plus/blob/dev/packages/components/menu/src/use-menu-css-var.ts

element-plus

来源：https://github.com/element-plus/element-plus/issues/4606

7条答案

按热度按时间

s3fp2yjn1#

Translation of this issue:

Existing Component

Yes

Component Name

Description

When I pass in another variable:

<ElMenu

background-color=\"var(--mk-aside-bg-color)\"
text-color=\"var(--mk-aside-text-color)\"

active-text-color=\"var(--mk-aside-active-color)\"
/>

--el-menu-hover-bg-color:rgb(204, 204, 204); Calculation error:

<ul 

role=\"menubar\" 
class=\"el-menu\" 

style=\"--el-menu-text-color:var(--mk-aside-text-color); --el-menu-hover-text-color:var(--mk-aside-text-color); --el-menu-bg-color:var(--mk-aside-bg-color); --el-menu-hover-bg-color:rgb(204, 204, 204); --el-menu-active-color:var(--mk-aside-active-color);\"
></ul>

The source code is calculated according to 'props. BackgroundColor'. It is recommended to change it to 'window. Getcomputedstyle (elmenu). Getpropertyvalue ("-- El menu BG color")`

https://github.com/element-plus/element-plus/blob/dev/packages/components/menu/src/use-menu-css-var.ts

赞(0）回复(0）举报 2022-10-22

yhived7q2#

直接 <ElMenu style="--el-menu-hover-bg-color: xxx;" /> 覆盖的话，只有第一层有效，嵌套的子菜单又会计算错误。

赞(0）回复(0）举报 2022-10-22

igetnqfo3#

而且，当--el-menu-bg-color 比较深的时候，计算出来的 --el-menu-hover-bg-color 几乎没变，没有什么存在感了。建议智能使用 darken() 或 lighten()

赞(0）回复(0）举报 2022-10-22

wqlqzqxt4#

@YunYouJun cc

赞(0）回复(0）举报 2022-10-22

ki0zmccv5#