feat(action-bar-icon): Add disabled state support (#13744)

packages/vant/src/action-bar-icon/ActionBarIcon.tsx

@@ -21,6 +21,7 @@ export const actionBarIconProps = extend({}, routeProps, {
   iconClass: unknownProp,
   badgeProps: Object as PropType<Partial<BadgeProps>>,
   iconPrefix: String,
+  disabled: Boolean,
 });
 
 export type ActionBarIconProps = ExtractPropTypes<typeof actionBarIconProps>;
@@ -65,11 +66,26 @@ export default defineComponent({
       );
     };
 
-    return () => (
+    return () => {
-      <div role="button" class={bem()} tabindex={0} onClick={route}>
+      const { disabled } = props;
-        {renderIcon()}
+
-        {slots.default ? slots.default() : props.text}
+      const handleClick = () => {
-      </div>
+        if (!disabled) {
-    );
+          route();
+        }
+      };
+
+      return (
+        <div
+          role="button"
+          class={bem({ disabled })}
+          tabindex={disabled ? -1 : 0}
+          onClick={handleClick}
+        >
+          {renderIcon()}
+          {slots.default ? slots.default() : props.text}
+        </div>
+      );
+    };
   },
 });

packages/vant/src/action-bar-icon/index.less

@@ -27,6 +27,19 @@
     background-color: var(--van-action-bar-icon-active-color);
   }
 
+  &--disabled {
+    color: var(--van-text-color-3);
+    cursor: not-allowed;
+
+    &:active {
+      background-color: transparent;
+    }
+
+    .van-action-bar-icon__icon {
+      color: var(--van-text-color-3);
+    }
+  }
+
   &__icon {
     margin: 0 auto var(--van-padding-base);
     color: var(--van-action-bar-icon-color);

packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap

@@ -12,6 +12,18 @@ exports[`should render default slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render disabled prop correctly 1`] = `
+<div
+  role="button"
+  class="van-action-bar-icon van-action-bar-icon--disabled"
+  tabindex="-1"
+>
+  <div class="van-badge__wrapper van-icon van-icon-search van-action-bar-icon__icon">
+  </div>
+  Search
+</div>
+`;
+
 exports[`should render icon slot correctly 1`] = `
 <div
   role="button"

packages/vant/src/action-bar-icon/test/index.spec.ts

@@ -73,3 +73,43 @@ test('should render badge-props prop correctly', async () => {
   const badge = wrapper.find('.van-badge');
   expect(badge.style.backgroundColor).toEqual('blue');
 });
+
+test('should render disabled prop correctly', () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      disabled: true,
+      text: 'Search',
+      icon: 'search',
+    },
+  });
+
+  expect(wrapper.classes()).toContain('van-action-bar-icon--disabled');
+  expect(wrapper.attributes('tabindex')).toBe('-1');
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should have correct class and tabindex when disabled', async () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      disabled: true,
+      text: 'Search',
+      icon: 'search',
+    },
+  });
+
+  expect(wrapper.classes()).toContain('van-action-bar-icon--disabled');
+  expect(wrapper.attributes('tabindex')).toBe('-1');
+});
+
+test('should have correct class and tabindex when not disabled', async () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      disabled: false,
+      text: 'Search',
+      icon: 'search',
+    },
+  });
+
+  expect(wrapper.classes()).not.toContain('van-action-bar-icon--disabled');
+  expect(wrapper.attributes('tabindex')).toBe('0');
+});

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

@@ -107,6 +107,7 @@ Use `badge` prop to show badge in icon.
 | url | Link URL | _string_ | - |
 | to | The target route should navigate to when clicked on, same as the [to prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-to) of Vue Router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
+| disabled | Whether to disable icon | _boolean_ | `false` |
 
 ### ActionBarButton Props
 

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

@@ -111,6 +111,7 @@ export default {
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，等同于 Vue Router 的 [to 属性](https://router.vuejs.org/zh/api/interfaces/RouterLinkProps.html#Properties-to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
+| disabled | 是否禁用图标 | _boolean_ | `false` |
 
 ### ActionBarButton Props