refactor(client): use setup syntax
This commit is contained in:
parent
fa6eb0e0f2
commit
47dcb1b41f
|
@ -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…
Reference in New Issue