乐趣区

ElementUI日历组件DatePicker切换中英文时文字不变化的问题


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

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;
}
退出移动版