refactor range input to composition api

This commit is contained in:
syuilo 2022-06-30 12:48:42 +09:00 committed by Johann150
parent e47af45407
commit f5d87fbc9e
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1

View file

@ -16,49 +16,26 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineAsyncComponent, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'; import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { modelValue: number;
modelValue: { disabled?: boolean;
type: Number, min: number;
required: false, max: number;
default: 0, step?: number;
}, textConverter?: (value: number) => string,
disabled: { }>(), {
type: Boolean, step: 1,
required: false, textConverter: (v) => v.toString(),
default: false, });
},
min: { const emit = defineEmits<{
type: Number, (ev: 'update:modelValue', value: number): void;
required: false, }>();
default: 0,
},
max: {
type: Number,
required: false,
default: 100,
},
step: {
type: Number,
required: false,
default: 1,
},
autofocus: {
type: Boolean,
required: false,
},
textConverter: {
type: Function,
required: false,
default: (v) => v.toString(),
},
},
setup(props, context) {
const containerEl = ref<HTMLElement>(); const containerEl = ref<HTMLElement>();
const thumbEl = ref<HTMLElement>(); const thumbEl = ref<HTMLElement>();
@ -150,7 +127,7 @@ export default defineComponent({
// //
if (beforeValue !== finalValue.value) { if (beforeValue !== finalValue.value) {
context.emit('update:modelValue', finalValue.value); emit('update:modelValue', finalValue.value);
} }
}; };
@ -159,19 +136,6 @@ export default defineComponent({
window.addEventListener('mouseup', onMouseup, { once: true }); window.addEventListener('mouseup', onMouseup, { once: true });
window.addEventListener('touchend', onMouseup, { once: true }); window.addEventListener('touchend', onMouseup, { once: true });
}; };
return {
rawValue,
finalValue,
steppedRawValue,
onMousedown,
containerEl,
thumbEl,
thumbPosition,
steps,
};
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>