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

ElementUI日历组件(DatePicker),切换中英文时,文字不变化的问题_第1张图片

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

window.location.reload

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

v-if

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

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

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

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

代码是这样的:


    
    
  watch: {
    language() {
        this.isDatePickerVisible = false
        this.$nextTick(() => {
            this.isDatePickerVisible = true
        })
    }
  }

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

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

你可能感兴趣的:(javascript,前端,vue.js,element-ui)