Vue: style计算有问题

[blqw]

Version

2.2.6

Reproduction link

https://jsfiddle.net/blqw/cLwau40z/

Steps to reproduce

鼠标移动到span标签上 然后再移开

What is expected?

span标签下边框恢复到初始状态, "透明"

What is actually happening?

span标签下边框变为黑色

[jkzing]

This should be an issue when vue updating style.
Vue is using HTMLElement.style.setProperty to update in line style.
Set border-color to '' on an element which originally has a border-bottom-color: transparent will simply erase all styles related border-color.

[johnninja]

这个很难说是个bug吧。首先，我发现vue会把border属性分解成border-width,border-color,border-style,border-image等。出错的那个span，你是用border-bottom-color设置初始颜色，其实被转换成

border-width: 1px;
border-style: solid; 
border-color: rgb(0, 0, 0) rgb(0, 0, 0) transparent; 
border-image: initial;

当鼠标移入，设置border-color，鼠标移出，不设置border-color。移出鼠标之后，vue就会找之前设置的border-color，但是发现并没有设置，所以不设置border-color，也就重新被转换为：

border-width: 1px;
border-style: solid; 
border-image: initial;

这样颜色就恢复初始状态黑色了。这一类简写的样式应该都有这样的问题，我试了一下border-width，结果一样。如果你简写方式设置的样式，但又对其单独某个属性进行类似toggle的操作，这样就会回到默认属性了。这是我个人的一点儿理解。😂

[jkzing]

如果不认为是bug，那么应该在文档中提及这点吧

[johnninja]

淡定，淡定。我是只个路人，不代表官方态度。😂

[yyx990803]

第二种情况两个 border-color 同名所以可以被 merge，但是第一种情况 Vue border-color 被重设的时候非简写的就被丢弃了。针对每一种简写都做专门的处理不现实，所以简单来说就是不支持这样的用法。

我个人看法是根本就不应该写这种 inline style + 简写覆盖的代码。静态的 style 抽取到单独的 css 里面就根本不存在这种问题了。

[jkzing]

@johnninja 我也就是说一下...😂

[blqw]

@jkzing @johnninja @yyx990803 感谢两位的讨论, 也感谢大神的回复
我觉得这个是bug的原因是: 他并没有按照预期被执行或者没有得到预期的结果, 至于实现难度应该算是另外一个维度讨论, 对于组件的使用者来说并不会在使用每个功能的时候都考虑一下这个功能的实现难度
就这个现象来说, 我的建议是,如果三级的css支持会有问题最好是在绑定的时候就立即的警告或者干脆抛出异常, 否则可能会存在一些没有测试到,而直接被发布到正式环境的问题
以上属于个人想法

[yyx990803]

严格意义上来说，这个确实属于 bug，但属于 wontfix，因为修复的代价远远大于修复的收益。css 规则简写没有什么规律可循，只能暴力列举，这个对代码量影响太大，能做的就是在文档里建议不要这么写。