perf(navbar): calc style

Tencent · Nov 28, 2024 · 0f41fae · 0f41fae
1 parent f9a0edc
commit 0f41fae
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/src/navbar/navbar.ts b/src/navbar/navbar.ts
@@ -90,12 +90,12 @@ export default class Navbar extends SuperComponent {
       if (!_menuRect || !_leftRect || !systemInfo) return;
 
       const _boxStyle = {
-        'padding-top': systemInfo.statusBarHeight,
-        'left-max-width': _menuRect.left, // 左侧内容最大宽度
-        'capsule-height': _menuRect.height, // 胶囊高度
-        'capsule-width': _menuRect.width, // 胶囊宽度
-        right: systemInfo.windowWidth - _menuRect.left, // 导航栏右侧小程序胶囊按钮宽度
-        height: (_menuRect.top - systemInfo.statusBarHeight) * 2 + _menuRect.height,
+        '--td-navbar-padding-top': `${systemInfo.statusBarHeight}px`,
+        '--td-navbar-left-max-width': `${_menuRect.left}px`, // 左侧内容最大宽度
+        '--td-navbar-capsule-height': `${_menuRect.height}px`, // 胶囊高度
+        '--td-navbar-capsule-width': `${_menuRect.width}px`, // 胶囊宽度
+        '--td-navbar-right': `${systemInfo.windowWidth - _menuRect.left}px`, // 导航栏右侧小程序胶囊按钮宽度
+        '--td-navbar-height': `${(_menuRect.top - systemInfo.statusBarHeight) * 2 + _menuRect.height}px`,
       };
 
       this.calcCenterStyle(_leftRect, _menuRect, _boxStyle);
@@ -109,12 +109,12 @@ export default class Navbar extends SuperComponent {
       const maxSpacing = Math.max(leftRect.right, systemInfo.windowWidth - menuRect.left);
       const _boxStyle = {
         ...defaultStyle,
-        'center-left': maxSpacing, // 标题左侧距离
-        'center-width': Math.max(menuRect.left - maxSpacing, 0), // 标题宽度
+        '--td-navbar-center-left': `${maxSpacing}px`, // 标题左侧距离
+        '--td-navbar-center-width': `${Math.max(menuRect.left - maxSpacing, 0)}px`, // 标题宽度
       };
 
       const boxStyle = Object.entries(_boxStyle)
-        .map(([k, v]) => `--td-navbar-${k}: ${v}px`)
+        .map(([k, v]) => `${k}: ${v}`)
         .join('; ');
 
       this.setData({