如何根据父组件在屏幕上的位置移动Vuetify组件`VDatePicker```

<template>
  <div>
    <button @click="showDatePicker = !showDatePicker">Toggle Date Picker</button>
    <v-date-picker v-if="showDatePicker" :style="datePickerStyle" v-model="selectedDate"></v-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDatePicker: false,
      selectedDate: null
    };
  },
  computed: {
    datePickerStyle() {
      // 根据父组件在屏幕上的位置计算样式
      const parentOffsetTop = this.$el.offsetTop;
      const parentOffsetLeft = this.$el.offsetLeft;

      return {
        top: parentOffsetTop + 'px',
        left: parentOffsetLeft + 'px'
      };
    }
  },
  mounted() {
    // 监听滚动事件，实时更新样式
    window.addEventListener('scroll', this.updateDatePickerStyle);
  },
  beforeDestroy() {
    // 移除滚动事件监听
    window.removeEventListener('scroll', this.updateDatePickerStyle);
  },
  methods: {
    updateDatePickerStyle() {
      // 更新样式
      this.datePickerStyle = {
        ...this.datePickerStyle,
        ...this.computeDatePickerStyle()
      };
    },
    computeDatePickerStyle() {
      // 根据父组件在屏幕上的位置计算样式
      const parentOffsetTop = this.$el.offsetTop;
      const parentOffsetLeft = this.$el.offsetLeft;

      return {
        top: parentOffsetTop + 'px',
        left: parentOffsetLeft + 'px'
      };
    }
  }
};
</script>