diff --git a/src/address-list/index.tsx b/src/address-list/index.tsx
index a5557189f..eb9f7e9cd 100644
--- a/src/address-list/index.tsx
+++ b/src/address-list/index.tsx
@@ -66,7 +66,9 @@ function AddressList(
     <div class={bem()} {...inherit(ctx)}>
       {slots.top?.()}
       <RadioGroup value={props.value}>{List}</RadioGroup>
-      {props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>}
+      {props.disabledText && (
+        <div class={bem('disabled-text')}>{props.disabledText}</div>
+      )}
       {DisabledList}
       {slots.default?.()}
       <div class={bem('bottom')}>
diff --git a/src/cell-group/index.tsx b/src/cell-group/index.tsx
index 2cc2d2819..78019a211 100644
--- a/src/cell-group/index.tsx
+++ b/src/cell-group/index.tsx
@@ -24,7 +24,10 @@ function CellGroup(
   ctx: RenderContext<CellGroupProps>
 ) {
   const Group = (
-    <div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]} {...inherit(ctx, true)}>
+    <div
+      class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}
+      {...inherit(ctx, true)}
+    >
       {slots.default?.()}
     </div>
   );
@@ -32,7 +35,9 @@ function CellGroup(
   if (props.title || slots.title) {
     return (
       <div>
-        <div class={bem('title')}>{slots.title ? slots.title() : props.title}</div>
+        <div class={bem('title')}>
+          {slots.title ? slots.title() : props.title}
+        </div>
         {Group}
       </div>
     );
diff --git a/src/loading/index.tsx b/src/loading/index.tsx
index 4af40f4f1..061e16638 100644
--- a/src/loading/index.tsx
+++ b/src/loading/index.tsx
@@ -33,7 +33,11 @@ function LoadingIcon(h: CreateElement, props: LoadingProps) {
   );
 }
 
-function LoadingText(h: CreateElement, props: LoadingProps, slots: DefaultSlots) {
+function LoadingText(
+  h: CreateElement,
+  props: LoadingProps,
+  slots: DefaultSlots
+) {
   if (slots.default) {
     const style = props.textSize && {
       fontSize: addUnit(props.textSize),
@@ -63,7 +67,10 @@ function Loading(
   }
 
   return (
-    <div class={bem([type, { vertical: props.vertical }])} {...inherit(ctx, true)}>
+    <div
+      class={bem([type, { vertical: props.vertical }])}
+      {...inherit(ctx, true)}
+    >
       <span class={bem('spinner', type)} style={style}>
         {LoadingIcon(h, props)}
       </span>
diff --git a/src/nav-bar/index.tsx b/src/nav-bar/index.tsx
index 592f74a4c..6b73bb989 100644
--- a/src/nav-bar/index.tsx
+++ b/src/nav-bar/index.tsx
@@ -36,36 +36,41 @@ function NavBar(
   slots: NavBarSlots,
   ctx: RenderContext<NavBarProps>
 ) {
+  function LeftPart() {
+    if (slots.left) {
+      return slots.left();
+    }
+
+    return [
+      props.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
+      props.leftText && <span class={bem('text')}>{props.leftText}</span>,
+    ];
+  }
+
+  function RightPart() {
+    if (slots.right) {
+      return slots.right();
+    }
+
+    if (props.rightText) {
+      return <span class={bem('text')}>{props.rightText}</span>;
+    }
+  }
+
   return (
     <div
-      class={[
-        bem({ fixed: props.fixed }),
-        { [BORDER_BOTTOM]: props.border },
-      ]}
       style={{ zIndex: props.zIndex }}
+      class={[bem({ fixed: props.fixed }), { [BORDER_BOTTOM]: props.border }]}
       {...inherit(ctx)}
     >
       <div class={bem('left')} onClick={ctx.listeners['click-left'] || noop}>
-        {slots.left
-          ? slots.left()
-          : [
-            props.leftArrow && (
-              <Icon class={bem('arrow')} name="arrow-left" />
-            ),
-            props.leftText && (
-              <span class={bem('text')}>{props.leftText}</span>
-            ),
-          ]}
+        {LeftPart()}
       </div>
       <div class={[bem('title'), 'van-ellipsis']}>
         {slots.title ? slots.title() : props.title}
       </div>
       <div class={bem('right')} onClick={ctx.listeners['click-right'] || noop}>
-        {slots.right
-          ? slots.right()
-          : props.rightText && (
-              <span class={bem('text')}>{props.rightText}</span>
-          )}
+        {RightPart()}
       </div>
     </div>
   );
diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
index 6b755d6c2..8ce64c627 100644
--- a/src/password-input/index.tsx
+++ b/src/password-input/index.tsx
@@ -39,7 +39,11 @@ function PasswordInput(
 
     Points.push(
       <li class={{ [BORDER_LEFT]: showBorder }} style={style}>
-        {props.mask ? <i style={{ visibility: char ? 'visible' : 'hidden' }} /> : char}
+        {props.mask ? (
+          <i style={{ visibility: char ? 'visible' : 'hidden' }} />
+        ) : (
+          char
+        )}
         {showCursor && <div class={bem('cursor')} />}
       </li>
     );
@@ -57,7 +61,9 @@ function PasswordInput(
       >
         {Points}
       </ul>
-      {info && <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>}
+      {info && (
+        <div class={bem(props.errorInfo ? 'error-info' : 'info')}>{info}</div>
+      )}
     </div>
   );
 }
diff --git a/src/search/index.tsx b/src/search/index.tsx
index ccf3135ff..e3cca0847 100644
--- a/src/search/index.tsx
+++ b/src/search/index.tsx
@@ -43,7 +43,11 @@ function Search(
 ) {
   function Label() {
     if (slots.label || props.label) {
-      return <div class={bem('label')}>{slots.label ? slots.label() : props.label}</div>;
+      return (
+        <div class={bem('label')}>
+          {slots.label ? slots.label() : props.label}
+        </div>
+      );
     }
   }
 
diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx
index 8ae234fec..eb529662f 100644
--- a/src/skeleton/index.tsx
+++ b/src/skeleton/index.tsx
@@ -33,7 +33,9 @@ function Skeleton(
 
   function Title() {
     if (props.title) {
-      return <h3 class={bem('title')} style={{ width: addUnit(props.titleWidth) }} />;
+      return (
+        <h3 class={bem('title')} style={{ width: addUnit(props.titleWidth) }} />
+      );
     }
   }
 
@@ -54,7 +56,9 @@ function Skeleton(
     }
 
     for (let i = 0; i < props.row; i++) {
-      Rows.push(<div class={bem('row')} style={{ width: addUnit(getRowWidth(i)) }} />);
+      Rows.push(
+        <div class={bem('row')} style={{ width: addUnit(getRowWidth(i)) }} />
+      );
     }
 
     return Rows;
diff --git a/src/sku/components/SkuHeader.tsx b/src/sku/components/SkuHeader.tsx
index cba98856c..fc4524601 100644
--- a/src/sku/components/SkuHeader.tsx
+++ b/src/sku/components/SkuHeader.tsx
@@ -16,7 +16,10 @@ export type SkuHeaderProps = {
 
 const [createComponent, bem] = createNamespace('sku-header');
 
-function getSkuImg(sku: SkuData, selectedSku: SelectedSkuData): string | undefined {
+function getSkuImg(
+  sku: SkuData,
+  selectedSku: SelectedSkuData
+): string | undefined {
   let img;
 
   sku.tree.some(item => {
diff --git a/src/sku/components/SkuRow.tsx b/src/sku/components/SkuRow.tsx
index f231e12bb..787d4cab2 100644
--- a/src/sku/components/SkuRow.tsx
+++ b/src/sku/components/SkuRow.tsx
@@ -24,7 +24,10 @@ function SkuRow(
   );
   return (
     <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
-      <div class={bem('title')}>{props.skuRow.k}{multipleNode}</div>
+      <div class={bem('title')}>
+        {props.skuRow.k}
+        {multipleNode}
+      </div>
       {slots.default && slots.default()}
     </div>
   );