diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx index fb99c9eef..dbeccf8ba 100644 --- a/packages/vant/src/image-preview/ImagePreviewItem.tsx +++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx @@ -15,6 +15,7 @@ import { createNamespace, makeRequiredProp, LONG_PRESS_START_TIME, + TAP_OFFSET, type ComponentInstance, } from '../utils'; @@ -250,7 +251,6 @@ export default defineComponent({ // Same as the default value of iOS double tap timeout const TAP_TIME = 250; - const TAP_OFFSET = 5; if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) { // tap or double tap diff --git a/packages/vant/src/rate/README.md b/packages/vant/src/rate/README.md index c729d4e30..219aa36bb 100644 --- a/packages/vant/src/rate/README.md +++ b/packages/vant/src/rate/README.md @@ -76,6 +76,14 @@ export default { ``` +### Clearable + +When the `clearable` prop is set to `true`, clicking on the same value again will reset the value to `0`. + +```html + +``` + ### Disabled ```html @@ -144,6 +152,7 @@ export default { | void-icon | Void icon | _string_ | `star-o` | | icon-prefix | Icon className prefix | _string_ | `van-icon` | | allow-half | Whether to allow half star | _boolean_ | `false` | +| clearable | Whether to allow clear when click again | _boolean_ | `false` | | readonly | Whether to be readonly | _boolean_ | `false` | | disabled | Whether to disable rate | _boolean_ | `false` | | touchable | Whether to allow select rate by touch gesture | _boolean_ | `true` | diff --git a/packages/vant/src/rate/README.zh-CN.md b/packages/vant/src/rate/README.zh-CN.md index 7e9e6361d..35732138e 100644 --- a/packages/vant/src/rate/README.zh-CN.md +++ b/packages/vant/src/rate/README.zh-CN.md @@ -86,6 +86,14 @@ export default { ``` +### 可清空 + +当 `clearable` 属性设置为 `true`，再次点击相同的值时，可以将值重置为 `0`。 + +```html + +``` + ### 禁用状态 通过 `disabled` 属性来禁用评分。 @@ -162,6 +170,7 @@ export default { | void-icon | 未选中时的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `star-o` | | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | | allow-half | 是否允许半选 | _boolean_ | `false` | +| clearable | 是否允许再次点击后清除 | _boolean_ | `false` | | readonly | 是否为只读状态，只读状态下无法修改评分 | _boolean_ | `false` | | disabled | 是否禁用评分 | _boolean_ | `false` | | touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` | diff --git a/packages/vant/src/rate/Rate.tsx b/packages/vant/src/rate/Rate.tsx index 7969063b9..c0513837e 100644 --- a/packages/vant/src/rate/Rate.tsx +++ b/packages/vant/src/rate/Rate.tsx @@ -10,6 +10,7 @@ import { makeNumberProp, makeNumericProp, createNamespace, + TAP_OFFSET, } from '../utils'; // Composables @@ -60,6 +61,7 @@ export const rateProps = { color: String, count: makeNumericProp(5), gutter: numericProp, + clearable: Boolean, readonly: Boolean, disabled: Boolean, voidIcon: makeStringProp('star-o'), @@ -85,8 +87,9 @@ export default defineComponent({ const [itemRefs, setItemRefs] = useRefs(); const groupRef = ref(); - const untouchable = () => - props.readonly || props.disabled || !props.touchable; + const unselectable = computed(() => props.readonly || props.disabled); + + const untouchable = computed(() => unselectable.value || !props.touchable); const list = computed(() => Array(+props.count) @@ -111,6 +114,7 @@ export default defineComponent({ let groupRefRect: DOMRect; let minRectTop = Number.MAX_SAFE_INTEGER; let maxRectTop = Number.MIN_SAFE_INTEGER; + let onlyTap = false; const updateRanges = () => { groupRefRect = useRect(groupRef); @@ -169,24 +173,24 @@ export default defineComponent({ return props.allowHalf ? 0.5 : 1; }; - const select = (index: number) => { - if (!props.disabled && !props.readonly && index !== props.modelValue) { - emit('update:modelValue', index); - emit('change', index); - } + const select = (value: number) => { + if (unselectable.value || value === props.modelValue) return; + emit('update:modelValue', value); + emit('change', value); }; const onTouchStart = (event: TouchEvent) => { - if (untouchable()) { + if (untouchable.value) { return; } touch.start(event); + onlyTap = true; updateRanges(); }; const onTouchMove = (event: TouchEvent) => { - if (untouchable()) { + if (untouchable.value) { return; } @@ -197,6 +201,13 @@ export default defineComponent({ preventDefault(event); select(getScoreByPosition(clientX, clientY)); } + + if ( + onlyTap && + (touch.offsetX.value > TAP_OFFSET || touch.offsetY.value > TAP_OFFSET) + ) { + onlyTap = false; + } }; const renderStar = (item: RateListItem, index: number) => { @@ -227,9 +238,11 @@ export default defineComponent({ const onClickItem = (event: MouseEvent) => { updateRanges(); - select( - allowHalf ? getScoreByPosition(event.clientX, event.clientY) : score - ); + let value = allowHalf + ? getScoreByPosition(event.clientX, event.clientY) + : score; + if (props.clearable && onlyTap && value === props.modelValue) value = 0; + select(value); }; return ( diff --git a/packages/vant/src/rate/demo/index.vue b/packages/vant/src/rate/demo/index.vue index ba493431a..a09999ac4 100644 --- a/packages/vant/src/rate/demo/index.vue +++ b/packages/vant/src/rate/demo/index.vue @@ -11,6 +11,7 @@ const t = useTranslate({ customIcon: '自定义图标', customStyle: '自定义样式', customCount: '自定义数量', + clearable: '可清空', readonly: '只读状态', readonlyHalfStar: '只读状态小数显示', changeEvent: '监听 change 事件', @@ -22,6 +23,7 @@ const t = useTranslate({ customIcon: 'Custom Icon', customStyle: 'Custom Style', customCount: 'Custom Count', + clearable: 'Clearable', readonly: 'Readonly', readonlyHalfStar: 'Readonly Half Star', changeEvent: 'Change Event', @@ -37,6 +39,7 @@ const value5 = ref(4); const value6 = ref(3); const value7 = ref(3.3); const value8 = ref(2); +const value9 = ref(3); const onChange = (value: number) => showToast(t('toastContent', value)); @@ -68,6 +71,10 @@ const onChange = (value: number) => showToast(t('toastContent', value)); + + + + diff --git a/packages/vant/src/rate/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/rate/test/__snapshots__/demo-ssr.spec.ts.snap index fac363ef9..fe007871d 100644 --- a/packages/vant/src/rate/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/rate/test/__snapshots__/demo-ssr.spec.ts.snap @@ -426,6 +426,87 @@ exports[`should render demo and match snapshot 1`] = ` +
+ +
+ + + + + + +
+
+
+
+ + + + + +
+
[]) { @@ -141,3 +142,27 @@ test('should render correct count when using string prop', () => { expect(icons).toHaveLength(4); }); + +test('should reset value to 0 when using clearable prop', () => { + const wrapper = mount(Rate, { + props: { + modelValue: 4, + clearable: true, + }, + }); + const icons = wrapper.findAll('.van-rate__item'); + const item4 = wrapper.findAll('.van-rate__icon')[3]; + mockGetBoundingClientRect(icons); + + trigger(wrapper, 'touchstart', 80, 0); + trigger(wrapper, 'touchmove', 80 + TAP_OFFSET, 0); + item4.trigger('click'); + expect(wrapper.emitted('change')![0]).toEqual([0]); + expect(wrapper.emitted('update:modelValue')![0]).toEqual([0]); + + trigger(wrapper, 'touchstart', 80, 0); + trigger(wrapper, 'touchmove', 80 + TAP_OFFSET + 1, 0); + item4.trigger('click'); + expect(wrapper.emitted('change')).toHaveLength(1); + expect(wrapper.emitted('update:modelValue')).toHaveLength(1); +}); diff --git a/packages/vant/src/utils/constant.ts b/packages/vant/src/utils/constant.ts index f111723e3..1e768abff 100644 --- a/packages/vant/src/utils/constant.ts +++ b/packages/vant/src/utils/constant.ts @@ -17,3 +17,4 @@ export const FORM_KEY: InjectionKey = Symbol('van-form'); // Same as the default value of iOS long press time // https://developer.apple.com/documentation/uikit/uilongpressgesturerecognizer/1616423-minimumpressduration export const LONG_PRESS_START_TIME = 500; +export const TAP_OFFSET = 5;