vue3中使用element-plus的一些坑

import { createApp,ref } from 'vue'
import App from './App.vue'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import ElementPlus from 'element-plus'
ElementPlus.useLang = (app, ref, locale) => {
​
    const template = (str, option) => {
      if (!str || !option) return str
      return str.replace(/\{(\w+)\}/g, (_, key) => {
        return option[key]
      })
    }
  
    // 注入全局属性,子组件都能通过inject获取
    app.provide('ElLocaleInjection', {
      lang: ref(locale.name),
      locale: ref(locale),
      t: (...args) => {
        const [path, option] = args
        let value
        const array = path.split('.')
        let current = locale
        for (let i = 0, j = array.length; i < j; i++) {
          const property = array[i]
          value = current[property]
          if (i === j - 1) return template(value, option)
          if (!value) return ''
          current = value
        }
      },
    })
  }
const app = createApp(App)
ElementPlus.useLang(app, ref, zhLocale)
app.use(ElementPlus)
app.mount('#app')

<el-date-picker
    type="daterange"
    v-model="date"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    size="small"
    format="YYYY 年 MM 月 DD 日"
    :shortcuts="shortcuts"
    @change="onChange"
></el-date-picker>
...
const date = ref('')
const shortcuts = reactive([{
          text: '最近一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        }, {
          text: '最近一个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        }, {
          text: '最近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        }]
)
...
function onChange(dat){
    date.value = dat
}

<template>
  <el-date-picker v-model="value" :disabledDate="isDisabled" @change="onChange" />
</template>
​
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
​
    const value = ref('')
    const firstSelectedDayRef = ref(null)
    const isDisabled = date => {
      const firstSelectedDay = firstSelectedDayRef.value
      if (firstSelectedDay) {
        const diff = dayjs(date).diff(firstSelectedDay, 'day')
        return diff > 30 || diff < -30
      }
      return false
    }
  const onChange = date => {
      if (!firstSelectedDayRef.value) firstSelectedDayRef.value = date
  }
</script>

.el-range-editor{
    margin-left:20px;
}