//主题-主题色
$theme-main-color: var(--theme-main-color, #f59b22);
//实心按钮
{
background-color: var(--custom-button-background-color, $theme-main-color);
} ```
``` :style="{
'--custom-button-font-color': customButtonFontColor,
'--custom-button-height': customSize ? `${customSize}rpx` : '',
'--button-radius': radius ? `${radius}rpx` : '',
'--custom-button-background-color': customButtonBackgroundColor,
'--custom-button-font-size': customButtonFontSize ? `${customButtonFontSize}rpx` : '',
'--custom-button-radius': customRadius ? `${customRadius}rpx` : '',
'--left-image-size': leftImageSize ? `${leftImageSize}rpx` : '',
'--left-image-radius': leftImageRadius ? `${leftImageRadius}rpx` : '',
'--right-image-size': rightImageSize ? `${rightImageSize}rpx` : '',
'--right-image-radius': rightImageRadius ? `${rightImageRadius}rpx` : ''
}" ```
f***@tom.com (作者)
高版本的ios系统,解析style中定义的css变量,如:--custom-size:;这样的内容会解析为有值,有值就不会走后面默认的值,如:font-size: var(--custom-size, 14px);此时此景的情况下,--custom-size变量为空,但是又不会解析后面默认值14px。就会导致整个页面出问题
2022-11-07 17:54
f***@tom.com (作者)
为了兼容css变量的使用,只有在style中判断当前变量是否存在,存在则设置当前css变量,不存在则给空值,兼容写法
style="[borderColor ?
--border-color: ${borderColor}
: '']",常规我们写都是:style="{--border-color: borderColor}"这样就好了,但是这种写法在ios高版本系统下是不起效的2022-11-07 17:57