refactor(client): use setup syntax
This commit is contained in:
		
							parent
							
								
									fa6eb0e0f2
								
							
						
					
					
						commit
						47dcb1b41f
					
				
					 1 changed files with 117 additions and 153 deletions
				
			
		|  | @ -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> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue