- 在开发中遇到一个需求，就是需要将一些自定义的
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>
以字符串的形式进行绑定之后，发现就所有平台都生效了，然后就可以封装成全局对象去进行绑定使用。
