切换语言的时候,有残留的文字没有被处理到(图里的星期)。

window.location.reload

简单粗暴的方法是,用 window.location.reload()
但是这样用户体验不太好。

v-if

我尝试在语言变化后,用 this.$forceupdate() ,没有用。
给组件一个 ref 属性,然后 this.$refs.datePicker.$forceUpdate(),也没有用 :(

然后在开发者工具里在数字“一”后面写上“111”,再切换语言,我写的“111”还在。在“确定”后面加上“111”,再切换语言,“111”不见了,“确定”也变成了“OK”。

这个地方星期文字的生成,应该是在js代码里写的,而且切换语言后没有重新生成。

尝试给 datePicker 组件 v-if ,然后切换显示隐藏,强制让它重新渲染一次,正常了~

代码是这样的:

<span class="date-picker-placeholder">    <el-date-picker v-if="isDatePickerVisible"        v-model="date[0]"        type="datetime"        @change="handleTimeChange"        :picker-options="datePickerStartOptions"        :placeholder="$t('placeholder.startTime')">    </el-date-picker></span>
  watch: {    language() {        this.isDatePickerVisible = false        this.$nextTick(() => {            this.isDatePickerVisible = true        })    }  }

切换显示隐藏的时候,可能隐藏时父元素高度变化、左边或右边的元素飘过来,造成页面闪动,可以给 el-date-picker 标签一个占位父元素,设置固定的宽高,就不会闪了。

.date-picker-placeholder {    width: 190px;    height: 32px;}