关于Element Plus 的日期组件修改成中文显示

关于Element Plus 的日期组件修改成中文

1.默认样式

默认是英文的
关于Element Plus 的日期组件修改成中文显示_第1张图片

2.修改方法

第一步 引入语言包

import zhcn from 'element-plus/lib/locale/lang/zh-cn'

第二步 定义对象

let local = zhcn

第三步 return local

    return {
        local
      }

第四步 用 < el-config-provider>< /el-config-provider>包裹日期组件

<el-config-provider :locale="local">
      <el-date-picker
       v-model="formField.birthday"
       type="date"
       placeholder="生日"
       size="default"/>
</el-config-provider>

3.完整代码

<template>
	<div>
   	  <el-config-provider :locale="local">
      	<el-date-picker
      	 v-model="formField.birthday"
      	 type="date"
      	 placeholder="生日"
       	size="default"/>
	  </el-config-provider>
    </div>
</template>

<script>
import zhcn from 'element-plus/lib/locale/lang/zh-cn'
            export defalut{
                setup(){
                    let local = zhcn
                    return {
       					 local
      				}
                }
            }
            
</script>

4.中文日期组件样式

关于Element Plus 的日期组件修改成中文显示_第2张图片

你可能感兴趣的:(vue,javascript,vue.js,css3)