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

  • Post author:
  • Post category:其他



目录


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>



版权声明:本文为Lyrelion原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。