mia/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor range input component

Browse source 
part of bffe6fb9bfa1fe61eab4f03bd318c010644d7afb
This commit is contained in:
syuilo 2022-06-30 03:53:40 +09:00 committed by Johann150
parent 49a98b1eb0
commit 303ce42024
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/client/src/components/form/range.vue
View file

@ -4,7 +4,7 @@
<div v-adaptive-border class="body"> <div v-adaptive-border class="body">
<div ref="containerEl" class="container"> <div ref="containerEl" class="container">
<div class="track"> <div class="track">
<div class="highlight" :style="{ width: (steppedValue * 100) + '%' }"></div> <div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
</div> </div>
<div v-if="steps" class="ticks"> <div v-if="steps" class="ticks">
<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div> <div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
@ -12,6 +12,7 @@
<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div> <div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
</div> </div>
</div> </div>
<div class="caption"><slot name="caption"></slot></div>
</div> </div>
</template> </template>
@ -62,7 +63,7 @@ export default defineComponent({
const thumbEl = ref<HTMLElement>(); const thumbEl = ref<HTMLElement>();
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min)); const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
const steppedValue = computed(() => { const steppedRawValue = computed(() => {
if (props.step) { if (props.step) {
const step = props.step / (props.max - props.min); const step = props.step / (props.max - props.min);
return (step * Math.round(rawValue.value / step)); return (step * Math.round(rawValue.value / step));
@ -71,7 +72,11 @@ export default defineComponent({
} }
}); });
const finalValue = computed(() => { const finalValue = computed(() => {
return (steppedValue.value * (props.max - props.min)) + props.min; if (Number.isInteger(props.step)) {
return Math.round((steppedRawValue.value * (props.max - props.min)) + props.min);
} else {
return (steppedRawValue.value * (props.max - props.min)) + props.min;
}
}); });
watch(finalValue, () => { watch(finalValue, () => {
context.emit('update:modelValue', finalValue.value); context.emit('update:modelValue', finalValue.value);
@ -86,10 +91,10 @@ export default defineComponent({
if (containerEl.value == null) { if (containerEl.value == null) {
thumbPosition.value = 0; thumbPosition.value = 0;
} else { } else {
thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value; thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
} }
}; };
watch([steppedValue, containerEl], calcThumbPosition); watch([steppedRawValue, containerEl], calcThumbPosition);
let ro: ResizeObserver | undefined; let ro: ResizeObserver | undefined;
@ -154,7 +159,7 @@ export default defineComponent({
return { return {
rawValue, rawValue,
finalValue, finalValue,
steppedValue, steppedRawValue,
onMousedown, onMousedown,
containerEl, containerEl,
thumbEl, thumbEl,