vue ElementUI时间组件默认时间上个月一号到30号 编写公用方法页面给其他调用

你可以使用 ElementUI 的 DatePicker 组件来实现默认时间为上个月一号到30号的功能，并将其封装为一个公用组件，供其他页面调用。具体实现方法如下：

<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    :default-value="defaultValue"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    @change="handleChange"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      defaultValue: [],
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < this.minDate.getTime() || time.getTime() > this.maxDate.getTime();
        },
      },
    };
  },
  computed: {
    minDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth();
      const lastMonth = month === 0 ? 12 : month; // 如果当前是1月，则上个月是12月
      const lastMonthYear = month === 0 ? year - 1 : year; // 如果当前是1月，则上个月的年份要减1
      return new Date(lastMonthYear, lastMonth - 1, 1); // 上个月的第一天
    },
    maxDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth();
      return new Date(year, month, 0); // 当月的最后一天
    },
  },
  mounted() {
    this.defaultValue = [this.minDate, this.maxDate];
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value);
    },
  },
};
</script>

这个组件使用 ElementUI 的 DatePicker 组件，并通过 `type="daterange"` 属性指定日期范围选择器。在 `mounted` 钩子函数中，将组件的默认值设置为上个月一号到30号这个时间范围。具体实现方法与上一个回答中的 `getLastMonthRange` 函数类似。然后在 `computed` 中计算出时间范围的最小值和最大值，并在 `pickerOptions` 中通过 `disabledDate` 属性禁用不在这个时间范围内的日期。最后，通过 `handleChange` 方法将选择的时间范围通过 `$emit` 事件传递给父组件。在其他页面中使用这个组件时，只需要引入并设置 `v-model` 即可。例如：

<template>
  <div>
    <date-range-picker v-model="selectedRange" />
    <p>已选择的时间范围：{{ selectedRange[0] }} ~ {{ selectedRange[1] }}</p>
  </div>
</template>

<script>
import DateRangePicker from './DateRangePicker.vue';

export default {
  components: {
    DateRangePicker,
  },
  data() {
    return {
      selectedRange: [],
    };
  },
};
</script>

在上面的代码中，使用 `import` 引入 `DateRangePicker` 组件，并在模板中使用 `<date-range-picker>` 标签引用这个组件。然后将 `selectedRange` 数据绑定到组件的 `v-model` 上，即可在选择时间范围的时候将结果保存到 `selectedRange` 数组中。在模板中使用 `{{ selectedRange[0] }}` 和 `{{ selectedRange[1] }}` 显示选择的时间范围即可。