refactor(client): use setup syntax
This commit is contained in:
		| @@ -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> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo