vue 日期居中组件

Vue 日期选择组件中，有一个常见的需求是实现日期范围的居中显示，比如让用户选择当前日期到未来一周或过去的某段时间。这类功能通常通过结合 Vue 的日期插件如 `vue-datepicker`、`iview` 或者 `element-ui` 中的日期选择器来实现。

例如，`iview`库中的 DatePicker 组件提供了一个 `options` 属性，可以配置初始展示日期。你可以设置它为当前日期，然后调整其他选项使其看起来像是居中显示。示例代码如下：

<template>
  <i-date-picker v-model="startDate" :options="{ startOfWeek: 1 }" />
</template>

<script>
export default {
  data() {
    return {
      startDate: new Date(),
    };
  },
}
</script>

在这个例子中，`startOfWeek: 1` 表示从星期日开始，`v-model="startDate"` 实现了双向数据绑定，日期改变时会更新视图。

如果需要自定义日期居中效果，可能需要计算两个日期的差值，并动态调整起始日期，或者创建一个计算属性来处理这个逻辑。