[vuetify] 失去焦点时将文本框格式化

失去焦点时格式化时间到HH:mm格式。

<template>
	<v-text-field
		label="Clock Out at"
		v-model="clockOutAt"
		@blur="formatTime"
	/>
</template>
<script>
const TIME_REGEX = /^(\d+):(\d+)$/;
export default {
	data(){
		return {
			clockOutAt: null
		}
	},
	methods: {
		formatTime(e) {
			let el = e.target;
			let v = el.value;
			let match = v.match(TIME_REGEX);
			if (match) {
				let h = Number(match[1]) % 24;
				let m = Number(match[2]) % 60;
				let hh = h.toString().padStart(2, "0");
				let mm = m.toString().padStart(2, "0");
					el.value = hh + ":" + mm;
					el.dispatchEvent(new Event("input"));
				}
			}
		}
	}
}
</script>