From 3fa96d7f642f4eb501763d430c5fdc09a4363c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E9=93=83=E8=96=AF=E5=A4=B4?= <m@xlsea.cn>
Date: Sat, 9 Sep 2023 08:57:38 +0800
Subject: [PATCH] feat(NavBar): add leftDisabled and rightDisabled prop
 (#12258)

---
 packages/vant/src/nav-bar/NavBar.tsx      | 22 ++++++++++++++++++----
 packages/vant/src/nav-bar/README.md       |  2 ++
 packages/vant/src/nav-bar/README.zh-CN.md |  2 ++
 packages/vant/src/nav-bar/index.less      |  6 ++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/vant/src/nav-bar/NavBar.tsx b/packages/vant/src/nav-bar/NavBar.tsx
index c88208df1..d5f5dcd01 100644
--- a/packages/vant/src/nav-bar/NavBar.tsx
+++ b/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>
diff --git a/packages/vant/src/nav-bar/README.md b/packages/vant/src/nav-bar/README.md
index 0e914dd68..282c58166 100644
--- a/packages/vant/src/nav-bar/README.md
+++ b/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` |
diff --git a/packages/vant/src/nav-bar/README.zh-CN.md b/packages/vant/src/nav-bar/README.zh-CN.md
index b4086f5c6..dfcdaeeee 100644
--- a/packages/vant/src/nav-bar/README.zh-CN.md
+++ b/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` |
diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less
index ec3835e6f..f5ccc54fb 100644
--- a/packages/vant/src/nav-bar/index.less
+++ b/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);
+  }
 }