全局修改 iview DatePicker组件 props startDate 为服务器时间 vue2

全局修改 iview DatePicker组件 props startDate 为服务器时间 vue2

产品需求 日期选择的时候，默认不能 是服务器时间，所以对组件默认值进行修改

创建 replacePropsDefaultValueForIView.js 文件在 utils目录

import Vue from "vue";

export const replacePropsDefaultValueForIView = (iView) => {

  // 对iView的DatePicker的props默认值进行全局修改
  iView.DatePicker.mixins[0].props.startDate = {
    type: Date,
    default: () => {
      // new Date(2024, 0, 1) // 例如，设置为2024年1月1日
      return Vue.prototype.$app.nowDateComputed
    }
  }
 }

main.js 导入函数

import { replacePropsDefaultValueForIView } from './utils/replacePropsDefaultValueForIView.js'
// 对iView组件库的props默认值进行修改，暂时修改的是 DatePicker的startDate
// 需求要将服务器时间 替换 客户端时间
replacePropsDefaultValueForIView(iView)
// 这个函数的下一行 应该是 Vue.use(iView, { ... })

我在App.vue 文件里面 写的计算属性，方便全局获取
App.vue

computed: {
    nowDateComputed () {
	    // DatePicker 组件下添加
      // :start-date="$app.nowDateComputed"
      if (this.$G && this.$G.menuInfo && this.$G.menuInfo.nowDate) {
        return dayjs(this.$G.menuInfo.nowDate).toDate() // 这里 new Date 不能对 09月 这类字符串进行正确解析
      }

      console.error('服务器获取时间失败 this.$G.menuInfo.nowDate 没有获取成功！')
      return new Date()
    },
},
mounted () {
  Vue.prototype.$app = this
}

这里 this.$G.menuInfo.nowDate 就是 异步$api获得数据，放在了 localStorage 里了，读写什么的网上一堆，就不贴代码了。