feat(NavBar): add leftDisabled and rightDisabled prop (#12258)

packages/vant/src/nav-bar/NavBar.tsx

@@ -30,6 +30,8 @@ export const navBarProps = {
   border: truthProp,
   leftText: String,
   rightText: String,
+  leftDisabled: Boolean,
+  rightDisabled: Boolean,
   leftArrow: Boolean,
   placeholder: Boolean,
   safeAreaInsetTop: Boolean,
@@ -93,8 +95,14 @@ export default defineComponent({
           <div class={bem('content')}>
             {hasLeft && (
               <div
-                class={[bem('left'), props.clickable ? HAPTICS_FEEDBACK : '']}
-                onClick={onClickLeft}
+                class={[
+                  bem('left'),
+                  props.clickable && !props.leftDisabled
+                    ? HAPTICS_FEEDBACK
+                    : '',
+                  props.leftDisabled ? bem('disabled') : '',
+                ]}
+                onClick={!props.rightDisabled ? onClickLeft : () => {}}
               >
                 {renderLeft()}
               </div>
@@ -104,8 +112,14 @@ export default defineComponent({
             </div>
             {hasRight && (
               <div
-                class={[bem('right'), props.clickable ? HAPTICS_FEEDBACK : '']}
-                onClick={onClickRight}
+                class={[
+                  bem('right'),
+                  props.clickable && !props.rightDisabled
+                    ? HAPTICS_FEEDBACK
+                    : '',
+                  props.rightDisabled ? bem('disabled') : '',
+                ]}
+                onClick={!props.rightDisabled ? onClickRight : () => {}}
               >
                 {renderRight()}
               </div>

packages/vant/src/nav-bar/README.md

@@ -93,6 +93,8 @@ export default {
 | title | Title | _string_ | `''` |
 | left-text | Left Text | _string_ | `''` |
 | right-text | Right Text | _string_ | `''` |
+| left-disabled | Left Disabled | _boolean_ | `false` |
+| right-disabled | Right Disabled | _boolean_ | `false` |
 | left-arrow | Whether to show left arrow | _boolean_ | `false` |
 | border | Whether to show bottom border | _boolean_ | `true` |
 | fixed | Whether to fixed top | _boolean_ | `false` |

packages/vant/src/nav-bar/README.zh-CN.md

@@ -101,6 +101,8 @@ export default {
 | title | 标题 | _string_ | `''` |
 | left-text | 左侧文案 | _string_ | `''` |
 | right-text | 右侧文案 | _string_ | `''` |
+| left-disabled | 左侧禁用 | _boolean_ | `false` |
+| right-disabled | 右侧禁用 | _boolean_ | `false` |
 | left-arrow | 是否显示左侧箭头 | _boolean_ | `false` |
 | border | 是否显示下边框 | _boolean_ | `true` |
 | fixed | 是否固定在顶部 | _boolean_ | `false` |

packages/vant/src/nav-bar/index.less

@@ -7,6 +7,7 @@
   --van-nav-bar-title-font-size: var(--van-font-size-lg);
   --van-nav-bar-title-text-color: var(--van-text-color);
   --van-nav-bar-z-index: 1;
+  --van-nav-bar-disabled-opacity: var(--van-disabled-opacity);
 }
 
 .van-nav-bar {
@@ -75,4 +76,9 @@
   &__text {
     color: var(--van-nav-bar-text-color);
   }
+
+  &__disabled {
+    cursor: not-allowed;
+    opacity: var(--van-nav-bar-disabled-opacity);
+  }
 }