问答

vue 表单多语言配置,切换英文的时候,label 过长,样式如何处理

作者:admin 2021-07-15 我要评论

表单中文的时候,label-width="80px" ,当切换成英语的时候,label 可能会超过80 ,然后就自己换行了,有什么办法自适应,根据所有label 取最长的长度去设置label的宽...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png
表单中文的时候,label-width="80px" ,当切换成英语的时候,label 可能会超过80 ,然后就自己换行了,有什么办法自适应,根据所有label 取最长的长度去设置label的宽度,切换到英文的时候,label 宽度就设置长一些

目前做法是:按照英文的最长长度设置label-width,但是切换成中文的时候,label又太空了

###
:label-width="Eng ? 'apx' : 'bpx'"
###

html 或者 body 上 加上 lang 的 css
比如 lang-enlang-cn

css 里写的时候

.label {width:80px} /* 默认 中文 宽度 */

.lang-en .label {width:200px} /* 切换到英文时调整 */
###

中英切换时,用js改变label宽度

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue 表单多语言配置,切换英文的时候,la

    vue 表单多语言配置,切换英文的时候,la

  • element table如何导出指定列或指定行

    element table如何导出指定列或指定行

  • 字符串中的\\如何正确表示出来?

    字符串中的\\如何正确表示出来?

  • 【ant design vue】 使用wangeditor 做

    【ant design vue】 使用wangeditor 做

腾讯云代理商
海外云服务器