vue3中使用element-plus的一些坑

一、国际化问题

日期选择组件 el-date-picker无法显示中文问题

1、官网解决方案

2、github解决方案

方案代码摘录：
自定义configProvider

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')

二、picker-options选中区域问题

github官方回答

回答摘录：

请仔细查看文档，picker-options的属性已经平铺开了，还是说这些选项不满足你的需求？至于第一次选择的时间不是可以实现自己吗

分段选择实现：

最近一周

代码实现：

<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
}

至于github论坛小哥提到的需求：

现在选项不满足我的需求，我想在我选择第一个时间后组件能直接把我选中的这个时间的30天之前和30天之后变为不可点击样式

<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-date-picker的左边距为例：
1、浏览器开发者工具查看其样式类为：

date-picker样式类
2、在全局作用域下的style中（不能是某个scoped的style标签）编写样式即可覆盖

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