el-date-picker 国际化 示例

`el-date-picker` 是 Element UI 中的一个日期选择器组件，它提供了丰富的功能和高度可定制性。要实现国际化，你可以使用 Vue 的 `vue-i18n` 或者 Element UI 自带的国际化支持。下面是一个简单的国际化示例：

首先，你需要安装 `vue-i18n` 和配置它：

npm install vue-i18n

然后，在你的 Vue 项目中设置 `i18n`:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const messages = {
  en: {
    datePicker: {
      today: 'Today',
      clear: 'Clear',
      month: 'Month',
      year: 'Year',
      yesterday: 'Yesterday',
      last7Days: 'Last 7 Days',
      custom: 'Custom',
      selectDate: 'Select Date',
      selectTime: 'Select Time',
      startTime: 'Start Time',
      endTime: 'End Time',
    },
  },
  zh: { ... }, // 你的中文配置
  // 更多语言配置...
}

const i18n = new VueI18n({
  locale: 'en', // 当前语言
  fallbackLocale: 'en', // 默认语言（当检测不到用户首选语言时）
  messages,
})

new Vue({
  i18n,
  // 其他配置...
})

接下来，你在使用 `el-date-picker` 组件时，可以这样引用国际化文本：

<template>
  <el-date-picker
    v-model="value"
    :picker-options="datePickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      datePickerOptions: {
        shortcuts: [
          {
            text: this.$t('datePicker.today'), // 使用 i18n 文本
            onClick(picker) {
              picker.selectCurrent();
            }
          },
          // ...
        ],
        // 更多选项...
      },
    };
  },
  // ...
}
</script>