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