|
@@ -1,110 +1,130 @@
|
|
|
<template>
|
|
|
- <div class="input range">
|
|
|
- <div
|
|
|
- class="range-content"
|
|
|
- :class="{ animation: mode === modeEmun.default }"
|
|
|
- :style="{
|
|
|
- '--percentage': percenStyle,
|
|
|
- '--slideSize': os.isPC && !os.isTablet ? 'calc(var(--height) + 8px)' : 'calc(var(--height) + 14px)',
|
|
|
- }"
|
|
|
- @click="rangeClickHandler"
|
|
|
- ref="rangeRef"
|
|
|
- >
|
|
|
- <div class="range-locus" ref="locusRef">
|
|
|
- <span class="range-slide" @click.stop @touchstart="slideDownHandler" @mousedown="slideDownHandler"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <UInumber v-if="props.input" :modelValue="modelValue" @update:modelValue="inputUpdateHandler" :min="min" :max="max" :step="step" class="range-text" />
|
|
|
+ <div class="input range">
|
|
|
+ <div
|
|
|
+ class="range-content"
|
|
|
+ :class="{ animation: mode === modeEmun.default }"
|
|
|
+ :style="{
|
|
|
+ '--percentage': percenStyle,
|
|
|
+ '--slideSize':
|
|
|
+ os.isPC && !os.isTablet
|
|
|
+ ? 'calc(var(--height) + 8px)'
|
|
|
+ : 'calc(var(--height) + 14px)',
|
|
|
+ }"
|
|
|
+ @click="rangeClickHandler"
|
|
|
+ ref="rangeRef"
|
|
|
+ >
|
|
|
+ <div class="range-locus" ref="locusRef">
|
|
|
+ <span
|
|
|
+ class="range-slide"
|
|
|
+ @click.stop
|
|
|
+ @touchstart="slideDownHandler"
|
|
|
+ @mousedown="slideDownHandler"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <UInumber
|
|
|
+ v-if="props.input"
|
|
|
+ :modelValue="modelValue"
|
|
|
+ @update:modelValue="inputUpdateHandler"
|
|
|
+ :min="min"
|
|
|
+ :max="max"
|
|
|
+ :step="step"
|
|
|
+ class="range-text"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, computed, onMounted, watchEffect } from 'vue'
|
|
|
-import { rangePropsDesc } from './state'
|
|
|
-import UInumber from './number.vue'
|
|
|
-import { os } from '../../utils/index'
|
|
|
+import { ref, computed, onMounted, watchEffect } from "vue";
|
|
|
+import { rangePropsDesc } from "./state";
|
|
|
+import UInumber from "./number.vue";
|
|
|
+import { os } from "../../utils/index";
|
|
|
|
|
|
-const props = defineProps(rangePropsDesc)
|
|
|
-const emit = defineEmits(['update:modelValue'])
|
|
|
-const getValue = value => {
|
|
|
- const calcStep = Math.ceil(1 / props.step)
|
|
|
- const calcValue = Math.round(value * calcStep)
|
|
|
- const calcMin = props.min * calcStep
|
|
|
- const calcMax = props.max * calcStep
|
|
|
+const props = defineProps(rangePropsDesc);
|
|
|
+const emit = defineEmits(["update:modelValue"]);
|
|
|
+const getValue = (value) => {
|
|
|
+ const calcStep = Math.ceil(1 / props.step);
|
|
|
+ const calcValue = Math.round(value * calcStep);
|
|
|
+ const calcMin = props.min * calcStep;
|
|
|
+ const calcMax = props.max * calcStep;
|
|
|
|
|
|
- const newVal = calcValue >= calcMax ? calcMax : calcValue <= calcMin ? calcMin : calcValue - (calcValue % (calcStep * props.step))
|
|
|
+ const newVal =
|
|
|
+ calcValue >= calcMax
|
|
|
+ ? calcMax
|
|
|
+ : calcValue <= calcMin
|
|
|
+ ? calcMin
|
|
|
+ : calcValue - (calcValue % (calcStep * props.step));
|
|
|
|
|
|
- return newVal / calcStep
|
|
|
-}
|
|
|
+ return newVal / calcStep;
|
|
|
+};
|
|
|
|
|
|
const percen = computed({
|
|
|
- get() {
|
|
|
- const val = (Number(props.modelValue) - props.min) / (props.max - props.min)
|
|
|
- return val > props.max ? props.max : val
|
|
|
- },
|
|
|
- set(val) {
|
|
|
- const len = props.max - props.min
|
|
|
- emit('update:modelValue', getValue(props.min + len * val))
|
|
|
- },
|
|
|
-})
|
|
|
+ get() {
|
|
|
+ const val = (Number(props.modelValue) - props.min) / (props.max - props.min);
|
|
|
+ return val > props.max ? props.max : val;
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ const len = props.max - props.min;
|
|
|
+ emit("update:modelValue", getValue(props.min + len * val));
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
-const percenStyle = computed(() => `${percen.value * 100}%`)
|
|
|
+const percenStyle = computed(() => `${percen.value * 100}%`);
|
|
|
|
|
|
-const inputUpdateHandler = val => {
|
|
|
- emit('update:modelValue', getValue(val))
|
|
|
-}
|
|
|
+const inputUpdateHandler = (val) => {
|
|
|
+ emit("update:modelValue", getValue(val));
|
|
|
+};
|
|
|
|
|
|
const modeEmun = {
|
|
|
- slide: 0,
|
|
|
- default: 1,
|
|
|
-}
|
|
|
-const mode = ref(modeEmun.default)
|
|
|
-const locusWidth = ref(0)
|
|
|
-const locusRef = ref(null)
|
|
|
-const rangeWidth = ref(0)
|
|
|
-const rangeRef = ref(null)
|
|
|
+ slide: 0,
|
|
|
+ default: 1,
|
|
|
+};
|
|
|
+const mode = ref(modeEmun.default);
|
|
|
+const locusWidth = ref(0);
|
|
|
+const locusRef = ref(null);
|
|
|
+const rangeWidth = ref(0);
|
|
|
+const rangeRef = ref(null);
|
|
|
onMounted(() => {
|
|
|
- locusWidth.value = locusRef.value.offsetWidth
|
|
|
- rangeWidth.value = rangeRef.value.offsetWidth
|
|
|
-})
|
|
|
+ locusWidth.value = locusRef.value.offsetWidth;
|
|
|
+ rangeWidth.value = rangeRef.value.offsetWidth;
|
|
|
+});
|
|
|
|
|
|
-const rangeClickHandler = ev => {
|
|
|
- percen.value = ev.offsetX / rangeWidth.value
|
|
|
-}
|
|
|
+const rangeClickHandler = (ev) => {
|
|
|
+ percen.value = ev.offsetX / rangeWidth.value;
|
|
|
+};
|
|
|
|
|
|
-const parent = document.documentElement
|
|
|
-const slideDownHandler = ev => {
|
|
|
- console.log(ev)
|
|
|
- ev.preventDefault()
|
|
|
- const moveStartX = ev.clientX || ev.touches[0].clientX
|
|
|
- const startPercen = percen.value
|
|
|
- mode.value = modeEmun.slide
|
|
|
+const parent = document.documentElement;
|
|
|
+const slideDownHandler = (ev) => {
|
|
|
+ ev.preventDefault();
|
|
|
+ const moveStartX = ev.clientX || ev.touches[0].clientX;
|
|
|
+ const startPercen = percen.value;
|
|
|
+ mode.value = modeEmun.slide;
|
|
|
|
|
|
- const moveHandler = ev => {
|
|
|
- ev.preventDefault()
|
|
|
- const moveX = (ev.clientX || ev.touches[0].clientX) - moveStartX
|
|
|
- const readyPercen = startPercen + moveX / locusWidth.value
|
|
|
+ const moveHandler = (ev) => {
|
|
|
+ ev.preventDefault();
|
|
|
+ const moveX = (ev.clientX || ev.touches[0].clientX) - moveStartX;
|
|
|
+ const readyPercen = startPercen + moveX / locusWidth.value;
|
|
|
|
|
|
- percen.value = readyPercen < 0 ? 0 : readyPercen > 1 ? 1 : readyPercen
|
|
|
- }
|
|
|
-
|
|
|
- const upHandler = ev => {
|
|
|
- mode.value = modeEmun.default
|
|
|
- if (os.isPc && !os.isTablet) {
|
|
|
- parent.removeEventListener('mousemove', moveHandler, false)
|
|
|
- parent.removeEventListener('mouseup', upHandler, false)
|
|
|
- } else {
|
|
|
- parent.removeEventListener('touchmove', moveHandler)
|
|
|
- parent.removeEventListener('touchend', upHandler)
|
|
|
- }
|
|
|
- }
|
|
|
+ percen.value = readyPercen < 0 ? 0 : readyPercen > 1 ? 1 : readyPercen;
|
|
|
+ };
|
|
|
|
|
|
+ const upHandler = (ev) => {
|
|
|
+ mode.value = modeEmun.default;
|
|
|
if (os.isPc && !os.isTablet) {
|
|
|
- parent.addEventListener('mousemove', moveHandler, false)
|
|
|
- parent.addEventListener('mouseup', upHandler, false)
|
|
|
+ parent.removeEventListener("mousemove", moveHandler, false);
|
|
|
+ parent.removeEventListener("mouseup", upHandler, false);
|
|
|
} else {
|
|
|
- parent.addEventListener('touchmove', moveHandler, { passive: false })
|
|
|
- parent.addEventListener('touchend', upHandler, { passive: false })
|
|
|
+ parent.removeEventListener("touchmove", moveHandler);
|
|
|
+ parent.removeEventListener("touchend", upHandler);
|
|
|
}
|
|
|
-}
|
|
|
+ };
|
|
|
+
|
|
|
+ if (os.isPc && !os.isTablet) {
|
|
|
+ parent.addEventListener("mousemove", moveHandler, false);
|
|
|
+ parent.addEventListener("mouseup", upHandler, false);
|
|
|
+ } else {
|
|
|
+ parent.addEventListener("touchmove", moveHandler, { passive: false });
|
|
|
+ parent.addEventListener("touchend", upHandler, { passive: false });
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|