diff --git a/packages/vant/src/action-bar-icon/ActionBarIcon.tsx b/packages/vant/src/action-bar-icon/ActionBarIcon.tsx index 1e2a69260..c4c3c16a6 100644 --- a/packages/vant/src/action-bar-icon/ActionBarIcon.tsx +++ b/packages/vant/src/action-bar-icon/ActionBarIcon.tsx @@ -21,6 +21,7 @@ export const actionBarIconProps = extend({}, routeProps, { iconClass: unknownProp, badgeProps: Object as PropType>, iconPrefix: String, + disabled: Boolean, }); export type ActionBarIconProps = ExtractPropTypes; @@ -65,11 +66,26 @@ export default defineComponent({ ); }; - return () => ( -
- {renderIcon()} - {slots.default ? slots.default() : props.text} -
- ); + return () => { + const { disabled } = props; + + const handleClick = () => { + if (!disabled) { + route(); + } + }; + + return ( +
+ {renderIcon()} + {slots.default ? slots.default() : props.text} +
+ ); + }; }, }); diff --git a/packages/vant/src/action-bar-icon/index.less b/packages/vant/src/action-bar-icon/index.less index ee4c8c7a9..78dba619a 100644 --- a/packages/vant/src/action-bar-icon/index.less +++ b/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); diff --git a/packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap index 66de93447..bd9de52fb 100644 --- a/packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/action-bar-icon/test/__snapshots__/index.spec.ts.snap @@ -12,6 +12,18 @@ exports[`should render default slot correctly 1`] = ` `; +exports[`should render disabled prop correctly 1`] = ` +
+ + Search +
+`; + exports[`should render icon slot correctly 1`] = `
{ 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'); +}); diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md index 488d676fb..2b900b50c 100644 --- a/packages/vant/src/action-bar/README.md +++ b/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 diff --git a/packages/vant/src/action-bar/README.zh-CN.md b/packages/vant/src/action-bar/README.zh-CN.md index e2e38ac76..469163b7f 100644 --- a/packages/vant/src/action-bar/README.zh-CN.md +++ b/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