forked from verdnatura/salix-front
feat: imrpove VnInputTime to set cursor at start
This commit is contained in:
parent
3a73c6b908
commit
5d6cdd4e2e
|
@ -2,6 +2,7 @@
|
|||
import { watch, computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { date } from 'quasar';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
const model = defineModel({ type: String });
|
||||
const props = defineProps({
|
||||
|
@ -55,17 +56,24 @@ const formattedTime = computed({
|
|||
function dateToTime(newDate) {
|
||||
return date.formatDate(new Date(newDate), dateFormat);
|
||||
}
|
||||
|
||||
const timeField = ref();
|
||||
watch(
|
||||
() => model.value,
|
||||
(val) => (formattedTime.value = val),
|
||||
{ immediate: true }
|
||||
);
|
||||
const focusField = () => {
|
||||
nextTick(() => {
|
||||
const input = timeField.value.$el.querySelector('input');
|
||||
input.setSelectionRange(0, 0);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div @mouseover="hover = true" @mouseleave="hover = false">
|
||||
<QInput
|
||||
ref="timeField"
|
||||
class="vn-input-time"
|
||||
mask="##:##"
|
||||
placeholder="--:--"
|
||||
|
@ -74,6 +82,7 @@ watch(
|
|||
:class="{ required: $attrs.required }"
|
||||
style="min-width: 100px"
|
||||
:rules="$attrs.required ? [requiredFieldRule] : null"
|
||||
@focus="focusField"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon
|
||||
|
|
Loading…
Reference in New Issue