uniapp微信小程序css获取胶囊样式作为变量

在小程序中，有时候需要根据页面右上角胶囊的大小和位置设置样式，但是要获取胶囊的位置和大小需要通过js的"uni.getMenuButtonBoundingClientRect()"方法，此时在css中操作会有些不便，那么有没有办法吧js的数据转换成css的变量呢？

我的思路是在最外层节点加一个:style属性，用来定义css变量，通过数据绑定，将js数据变为css变量

<view class="home-header" :style="capsuleStyle">// 在组件最外层节点进行数据绑定


capsuleStyle() {
  const obj = {}
  const capsule = uni.getMenuButtonBoundingClientRect()
  let res = ''
  
  //将key转换为符合css变量的语法
  for (let key in capsule) {
    obj[`--capsule-${key}`] = capsule[key] + 'px'
  }
  
   //原本的思路是将值的设置为对象，但是小程序似乎不支持绑定的数据类型为object，所以这里转换为字符串
  for (let key in obj) {
    res += key + ':' + obj[key] + ';'
  }
  
  return res 
}