Open vedmant opened 2 years ago
I have a weird issue with VCalendar, when I move mouse over the popover it makes window scroll jump to 0.
https://user-images.githubusercontent.com/5052406/156120286-b1ec7fad-bcab-44b5-8616-43e10a941900.mp4
Here is my component code:
<template> <ClientOnly> <v-date-picker :value="value" mode="dateTime" is-range @input="v => $emit('input', v)" > <template #default="{ togglePopover }"> <div class="flex items-center cursor-pointer" @click="togglePopover()"> <div class="mr-2 text-sm text-gray-900"> {{ dayjs(value.start).format('Do MMM YYYY') }} - {{ dayjs(value.end).format('Do MMM YYYY') }} ({{ dayjs(value.start).format('ha') }} - {{ dayjs(value.end).format('ha') }}) </div> <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.67199 0.119883L4.99999 3.68011L1.32799 0.119883L0.199988 1.21703L4.99999 5.87988L9.79999 1.21703L8.67199 0.119883Z" fill="#969696" /> </svg> </div> </template> </v-date-picker> </ClientOnly> </template> <script> import dayjs from 'dayjs' import advancedFormat from 'dayjs/plugin/advancedFormat' dayjs.extend(advancedFormat) export default { props: { value: { type: Object, required: true }, }, methods: { dayjs, }, } </script>
I use Nuxt app, and registered VCalendar with a plugin:
import Vue from 'vue' import VCalendar from 'v-calendar' Vue.use(VCalendar)
Same problem here, however I add :popover="{ positionFixed:true }" to v-date-picker attributes that is working for me.
I have a weird issue with VCalendar, when I move mouse over the popover it makes window scroll jump to 0.
https://user-images.githubusercontent.com/5052406/156120286-b1ec7fad-bcab-44b5-8616-43e10a941900.mp4
Here is my component code:
I use Nuxt app, and registered VCalendar with a plugin: