From e47af45407cb5c8fce85152dbb28f832386ccd23 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 30 Jun 2022 12:42:35 +0900 Subject: [PATCH] perf(client): improve range control performance --- packages/client/src/components/form/range.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue index 9bb0164a2..7ef727d57 100644 --- a/packages/client/src/components/form/range.vue +++ b/packages/client/src/components/form/range.vue @@ -78,9 +78,6 @@ export default defineComponent({ return (steppedRawValue.value * (props.max - props.min)) + props.min; } }); - watch(finalValue, () => { - context.emit('update:modelValue', finalValue.value); - }); const thumbWidth = computed(() => { if (thumbEl.value == null) return 0; @@ -141,6 +138,8 @@ export default defineComponent({ rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value))); }; + let beforeValue = finalValue.value; + const onMouseup = () => { document.head.removeChild(style); tooltipShowing.value = false; @@ -148,6 +147,11 @@ export default defineComponent({ window.removeEventListener('touchmove', onDrag); window.removeEventListener('mouseup', onMouseup); window.removeEventListener('touchend', onMouseup); + + // 値が変わってたら通知 + if (beforeValue !== finalValue.value) { + context.emit('update:modelValue', finalValue.value); + } }; window.addEventListener('mousemove', onDrag);