docs(NavBar): add disable button demo (#12270)

* docs(NavBar): add disable button demo

* chore: fix bem

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

@@ -51,8 +51,16 @@ export default defineComponent({
     const navBarRef = ref<HTMLElement>();
     const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
-    const onClickLeft = (event: MouseEvent) => emit('clickLeft', event);
+    const onClickLeft = (event: MouseEvent) => {
-    const onClickRight = (event: MouseEvent) => emit('clickRight', event);
+      if (!props.leftDisabled) {
+        emit('clickLeft', event);
+      }
+    };
+    const onClickRight = (event: MouseEvent) => {
+      if (!props.rightDisabled) {
+        emit('clickRight', event);
+      }
+    };
 
     const renderLeft = () => {
       if (slots.left) {
@@ -96,13 +104,12 @@ export default defineComponent({
             {hasLeft && (
               <div
                 class={[
-                  bem('left'),
+                  bem('left', { disabled: props.leftDisabled }),
                   props.clickable && !props.leftDisabled
                     ? HAPTICS_FEEDBACK
                     : '',
-                  props.leftDisabled ? bem('disabled') : '',
                 ]}
-                onClick={!props.rightDisabled ? onClickLeft : () => {}}
+                onClick={onClickLeft}
               >
                 {renderLeft()}
               </div>
@@ -113,13 +120,12 @@ export default defineComponent({
             {hasRight && (
               <div
                 class={[
-                  bem('right'),
+                  bem('right', { disabled: props.rightDisabled }),
                   props.clickable && !props.rightDisabled
                     ? HAPTICS_FEEDBACK
                     : '',
-                  props.rightDisabled ? bem('disabled') : '',
                 ]}
-                onClick={!props.rightDisabled ? onClickRight : () => {}}
+                onClick={onClickRight}
               >
                 {renderRight()}
               </div>

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

@@ -84,6 +84,21 @@ export default {
 </van-nav-bar>
 ```
 
+### Disable Button
+
+Use the `left-disabled` or `right-disabled` props to disable the buttons on either side. The prop reduces the opacity of the button and makes it unclickable.
+
+```html
+<van-nav-bar
+  title="Title"
+  left-text="Back"
+  right-text="Button"
+  left-arrow
+  left-disabled
+  right-disabled
+/>
+```
+
 ## API
 
 ### Props
@@ -93,8 +108,8 @@ export default {
 | title | Title | _string_ | `''` |
 | left-text | Left Text | _string_ | `''` |
 | right-text | Right Text | _string_ | `''` |
-| left-disabled | Left Disabled | _boolean_ | `false` |
+| left-disabled `v4.6.8` | Whether to disable the left button, decrease opacity and make it unclickable | _boolean_ | `false` |
-| right-disabled | Right Disabled | _boolean_ | `false` |
+| right-disabled `v4.6.8` | Whether to disable the right button, decrease opacity and make it unclickable | _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

@@ -92,6 +92,21 @@ export default {
 </van-nav-bar>
 ```
 
+### 禁用按钮
+
+通过 `left-disabled` 或 `right-disabled` 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击。
+
+```html
+<van-nav-bar
+  title="标题"
+  left-text="返回"
+  right-text="按钮"
+  left-arrow
+  left-disabled
+  right-disabled
+/>
+```
+
 ## API
 
 ### Props
@@ -101,8 +116,8 @@ export default {
 | title | 标题 | _string_ | `''` |
 | left-text | 左侧文案 | _string_ | `''` |
 | right-text | 右侧文案 | _string_ | `''` |
-| left-disabled | 左侧禁用 | _boolean_ | `false` |
+| left-disabled `v4.6.8` | 是否禁用左侧按钮，禁用时透明度降低，且无法点击 | _boolean_ | `false` |
-| right-disabled | 右侧禁用 | _boolean_ | `false` |
+| right-disabled `v4.6.8` | 是否禁用右侧按钮，禁用时透明度降低，且无法点击 | _boolean_ | `false` |
 | left-arrow | 是否显示左侧箭头 | _boolean_ | `false` |
 | border | 是否显示下边框 | _boolean_ | `true` |
 | fixed | 是否固定在顶部 | _boolean_ | `false` |

packages/vant/src/nav-bar/demo/index.vue

@@ -9,11 +9,13 @@ const t = useTranslate({
     useSlot: '使用插槽',
     showBack: '返回上级',
     rightButton: '右侧按钮',
+    disableButton: '禁用按钮',
   },
   'en-US': {
     useSlot: 'Use Slot',
     showBack: 'Back',
     rightButton: 'Right Button',
+    disableButton: 'Disable Button',
   },
 });
 
@@ -53,4 +55,17 @@ const onClickRight = () => showToast(t('button'));
       </template>
     </van-nav-bar>
   </demo-block>
+
+  <demo-block :title="t('disableButton')">
+    <van-nav-bar
+      :title="t('title')"
+      :left-text="t('back')"
+      :right-text="t('button')"
+      left-arrow
+      left-disabled
+      right-disabled
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    />
+  </demo-block>
 </template>

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

@@ -63,6 +63,11 @@
     align-items: center;
     padding: 0 var(--van-padding-md);
     font-size: var(--van-font-size-md);
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: var(--van-nav-bar-disabled-opacity);
+    }
   }
 
   &__left {
@@ -76,9 +81,4 @@
   &__text {
     color: var(--van-nav-bar-text-color);
   }
-
-  &__disabled {
-    cursor: not-allowed;
-    opacity: var(--van-nav-bar-disabled-opacity);
-  }
 }

packages/vant/src/nav-bar/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -104,4 +104,34 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <!--[-->
+  <div
+    style
+    class="van-nav-bar van-hairline--bottom"
+  >
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__left van-nav-bar__left--disabled">
+        <!--[-->
+        <i
+          class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"
+          style
+        >
+          <!--[-->
+        </i>
+        <span class="van-nav-bar__text">
+          Back
+        </span>
+      </div>
+      <div class="van-nav-bar__title van-ellipsis">
+        Title
+      </div>
+      <div class="van-nav-bar__right van-nav-bar__right--disabled">
+        <span class="van-nav-bar__text">
+          Button
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;

packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap

@@ -70,4 +70,25 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-nav-bar van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__left van-nav-bar__left--disabled">
+        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
+        </i>
+        <span class="van-nav-bar__text">
+          Back
+        </span>
+      </div>
+      <div class="van-nav-bar__title van-ellipsis">
+        Title
+      </div>
+      <div class="van-nav-bar__right van-nav-bar__right--disabled">
+        <span class="van-nav-bar__text">
+          Button
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;