做国际化的时候遇到这个问题 ,默认开发大家都以中文来设置label-width,国际化翻译后就会导致字符太长出现换行的情况,下面以element默认size来举例
默认size的样式为line-height:40px ;换行就会出现倍增
解决方案:
1)监听dom node 节点变化,肯定有人疑惑为什么要这么做;
什么是MutationObserver ,想了解的同学可以去看看;
因为vue+element在开发过程中会有很多未来元素(现在不存在但未来或许存在)
const observeDom = new MutationObserver((mutations, observe) => {
this.$nextTick(() => {
this.resetLabel();
});
});
observeDom.observe(document.getElementById('toTop'), { childList: true, subtree: true });
2)
匹配现有页面的所有label高度对比是初始化的N倍,设置不同的line-height
实例以36为基数,大家可以自行设置contrastHeightlist枚举
Vue.prototype.resetLabel = () => {
const contrastHeightlist = [{number: 36, height: '36px'}, {number: 72, height: '20px'}, {number: 108, height: '13px'}, {number: 144, height: '10px'}];
// 初始化height36基数
(Array.from($('.el-form-item__label')) || []).forEach(ele => {
const currenNOde = $(ele)[0];
// 初始化line-height 和font-szie
currenNOde.style.cssText += ';line-height:36px!important';
$(ele).find('span').css('cssText', 'font-size:14px!important');
// 重新设置
let setting = contrastHeightlist.find(v => { return v.number === currenEle.offsetHeight; });
currenNOde.style.cssText += `;line-height:${currenNOde.offsetHeight > 144 ? '10px' : (setting ? setting.height : '36px')}!important;`;
});
}
最终成果
今天的分享就到这里,大家有什么疑问的地方可以在下面提问;
ps:分享不易,喜欢的同学可以点赞收藏支持鼓励下哈