在 .html 文件中实现 ElementPlus 国际化 / 日期插件使用的注意事项

目录

1. 前情提要

2. 实现 .html 文件中的 ElementPlus 国际化原理

3. 实现 .html 文件中的 ElementPlus 国际化过程

3.1 引入必要的 CDN 文件 vue3.js / elementplus.js / elementplus.css

3.2 Provider 组件 定义过程

3.3 定义 Vue 实例，并在里面配置 Provider 组件

3.4 使用 Provider 组件 及 需要被国际化处理的组件

4. 一些要注意的地方

4.1 ElementPlus 缺少图标引入的几种可能

4.2 关于日期插件中的弹框设置 popper-class

4.3 处理整体所放页面中的日期弹框缩放

---

1. 前情提要

因为我是在 .html 文件中使用 ElementPlus，首先考虑的引入方式就是 CDN 引入，因此进入官网之后直奔 CDN 方式引入教程，却无法实现国际化

我开始查找这么做不可用的原因，可能是 vue-i18n 版本之类的问题吧，反正报错一直很奇怪，最后没考虑这个方法了

2. 实现 .html 文件中的 ElementPlus 国际化原理

 抓耳挠腮时，看到了官方文档国际化的开头部分：

• options API 就是 vue2 那种写法
• Composition API 就是 vue3 那种写法

我的项目是 Vue3 写的，因此考虑第二种写法，官方示例如下：

该方法基本就是通过自己写一个  ConfigProvider 的方式，来注入所有配置

import { useLocale, useLocaleProps } from 'element-plus'
// Locale Wrapper 入口
const Provider = defineComponent({
  props: {
    // 如果你需要你的应用可以相应式的更新语言，那么这里的 props 必须包含下面这个 props
    ...useLocaleProps,
  },
  setup() {
    // 不需要任何参数，但是需要你的这个组件可以接受
    // ` { locale?: Language, i18n?: (...args: any[]) => string }` 作为参数
    useLocale()
  }
})


createApp(
  {
    // ...
    template: `
      <provider :locale="locale" :i18n="i18n">
        <App />
      </provider>
    `
  }
)

3. 实现 .html 文件中的 ElementPlus 国际化过程

上面都是 import 方式引入的，就是 .vue 文件里可以这么写

但是因为我是在 .html 文件里编辑，引入的 ElementPlus 是一个 js文件，导出了模块

因此 import { useLocale, useLocaleProps } from 'element-plus' 可以替换成 ElementPlus.useLocaleProps, ElementPlus.useLocale(); 类似于这种引入方式

3.1 引入必要的 CDN 文件 vue3.js / elementplus.js / elementplus.css

  <!-- vue 这里最终应该下载一个稳定版本 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
  <script src="https://unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>

3.2 Provider 组件 定义过程

模仿官方示例，定义一个 Provider 组件，给该组件定义模板，放一个插槽就行了，接下来需要国际化的组件，都丢到这个组件标签里

// Locale Wrapper 入口
const Provider = Vue.defineComponent({
  template: '<slot/>',
  props: {
    // 如果你需要你的应用可以相应式的更新语言，那么这里的 props 必须包含下面这个 props
    ...ElementPlus.useLocaleProps,
  },
  setup() {
    // 不需要任何参数，但是需要你的这个组件可以接受
    ElementPlus.useLocale();
  }
});

3.3 定义 Vue 实例，并在里面配置 Provider 组件

  const App = Vue.defineComponent({
    components: {
      Provider, // 引入国际化组件
    },
    setup() {
      const value2 = Vue.ref('');
      return {
        locale: ElementPlus.lang.zhCn, // setup() 中 返回需要的语言包
        value2,
      }
    }
  });

  // 挂载 Vue 的 app实例
  Vue.createApp(App)
      .use(ElementPlus)
      .mount('#app');

3.4 使用 Provider 组件 及 需要被国际化处理的组件

1. 在 provider标签中，传入 setup() 中返回的国际化语言包配置
2. 使用 provider标签 包裹住需要国际化的组件，此处用的是 ElementPlus 日期插件

<div id="app">
  <provider :locale="locale">
    <el-date-picker
        v-model="value2"
        type="month"
        placeholder="选择月">
    </el-date-picker>
  </provider>
</div>

4. 一些要注意的地方

4.1 ElementPlus 缺少图标引入的几种可能

使用日期插件的时候，引入 ElementPlus 首页安装部分的 CDN样式文件，该文件可能会缺少一些图标

正确做法：点进日期插件的示例代码，在线测试，查看官方引用的样式文件，并进行复制粘贴

如果在本地 .html 文件中使用在线测试中的 CDN 文件（就是把在线地址中的代码单独拷贝到本地），依旧会有找不到某图标的报错

建议直接用线上地址，尽量不要将 CDN文件存在本地

小图标如下所示：

4.2 关于日期插件中的弹框设置 popper-class

popper-class="startClass"

popper-class 属性，可以针对日期插件弹框的样式进行单独设置，只需写入类名

如下图所示，已经将 startClass 类的样式写入日期组件弹框了

4.3 处理整体所放页面中的日期弹框缩放

一般情况下，弹框位置会自动进行计算，但是我做的大屏项目对 body 整体进行了缩放，也就是对日期选择框进行了缩放，日期弹出的弹框是不属于 body 内的，而是动态写入的，因此不会跟随缩放

概括：日期选择框是跟随 body 缩放的，日期弹出框是自动生成的不跟随 body 缩放

若想缩放日期弹出框，需要去开发者工具中查询其最外层类名，并进行缩放

不使用 zoom 缩放的原因： 会影响 Echarts 图表的展示 

          <provider :locale="locale">
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="选择日期"
              popper-class="startClass"
            >
            </el-date-picker>
          </provider>

<style>
    html {
      /* 此处用 zoom 会导致echarts图表选中有问题 */
      /* zoom: 0.25; */
      transform: scale(0.25);
      /* 修改缩放后的位置，将页面居左居上 */
      transform-origin: 0 0;
      overflow: hidden;
    }

    /* 弹框位置 */
    .el-picker__popper.el-popper.is-light.is-pure {
      /* zoom: 3; */
      transform: scale(3);
      transform-origin: 0 0;
    }

    /* 日期弹框的样式 */
    .startClass {
      left: 306px !important;
      top: 405px !important;
    }
</style>