现在的项目需要做中英文切换功能,我发现element plus 只有日期组件不能转换,然后上网查了一下并结合自己的方法写了出来。
代码:
<template>
<!-- 日期框组件 -->
<div class="time-box">
//:locale="locale"绑定locale属性
<el-config-provider :locale="locale">
<el-date-picker
type="daterange"
range-separator="~"
:start-placeholder="$t('leftMenubar.leftMenubarStartdate')"
:end-placeholder="$t('leftMenubar.leftMenubarEnddate')"
style="width: 260px"
v-model="timevalue"
@change="Datachange"
popper-class="popperClass"
value-format="YYYY-MM-DD"
>
</el-date-picker>
</el-config-provider>
</div>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
//引入中文和英文
import zhLocale from 'element-plus/es/locale/lang/zh-cn'
import enLocale from 'element-plus/es/locale/lang/en'
// 日期
const timevalue = ref(null);
//这是关键代码,我是将中英文切换字段存储在本地
const locale=ref(localStorage.getItem('lang')=='zh'?zhLocale:enLocale) ;
</script>