UniApp 解决 style 绑定 css 变量，支持 var() 使用

在开发中遇到一个需求，就是需要将一些自定义的 css var 变量绑定到页面根元素的 style 身上，方便使用，这里用的是 sass 预处理器。

UniApp 官方自带了几个属性，但是有时候还是不够用，需要自定义一些使用。

（无效）绑定对象

<template>
    <view class="content" :style="temp2">
        <text class="dzm-test">{{ JSON.stringify(temps) }}text>
    view>
template>

<script>
export default {
    data() {
        return {
            // 绑定了一个 css 对象
            temp: {'--bgcolor': 'yellow'}
        }
    }
}
script>

<style lang="scss">
// 使用常量
$color: red;
// 测试样式
.dzm-test {
    color: $bgcolor;
    background-color: var(--bgcolor);
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

会发现只有 小程序 没有生效，而且在动态绑定 style 样式时渲染到标签中的是 [object Object]，原因是因为：小程序 不支持 动态绑定对象格式的样式，建议手怼内联样式上去。

这样的话就不能做到统一了，所以后面经过测试跟看源码，小程序支持字符串的形式，同时也发现官方也是通过字符串的方式进行绑定到 html 根标签上进行实现的，所以想要实现功能，同样可以走字符串的方式。

（有效）绑定字符串

<template>
    <view class="content" :style="temp">
        <text class="dzm-test">{{ temp }}text>
    view>
template>

<script>
export default {
    data() {
        return {
            // 绑定了一个 css 对象
            temp: '--bgcolor: yellow;'
        }
    }
}
script>

<style lang="scss">
// 使用常量
$color: red;
// 测试样式
.dzm-test {
    color: $color;
    background-color: var(--bgcolor);
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

以字符串的形式进行绑定之后，发现就所有平台都生效了，然后就可以封装成全局对象去进行绑定使用。