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>
  

  

  会发现只有 小程序 没有生效，而且在动态绑定 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>
  

  

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