【JavaScript】如何根据长度并计算渲染px width宽度

最新推荐文章于 2024-05-10 13:13:32 发布

努力挣钱的小鑫

最新推荐文章于 2024-05-10 13:13:32 发布

阅读量464

点赞数

分类专栏： JavaScript/TypeScript 文章标签： javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/IAIPython/article/details/130571214

版权

JavaScript/TypeScript 专栏收录该内容

36 篇文章

订阅专栏

需求

公司项目需求是要做动态响应式表头，因此就要动态渲染表格表头宽度在一定范围内(100px-200px)。
完整实现图：

实现过程

这里就不讲css自动超出省略了，主要是然后根据后台返回的字符串计算实际渲染字符宽度，并设置给 element 表头的 min-width

:min-width="calcMinWidth(item.displayName)"

核心函数代码：

calcMinWidth(displayName) {
      // 100 - 200
      // console.log(displayName.length)
      console.log(displayName)
      // 计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth
      String.prototype.pxWidth = function(font) {
        const canvas =
          String.prototype.pxWidth.canvas ||
          (String.prototype.pxWidth.canvas = document.createElement('canvas'))
        const context = canvas.getContext('2d')
        font && (context.font = font)
        const metrics = context.measureText(this)
        return metrics.width
      }
      // 根据需求范围返回
      const width = displayName.pxWidth('bold 18px Lato') + 30
      if (width <= 100) {
        return '100'
      } else if (width >= 200) {
        return '200'
      } else {
        return width + ''
      }
    },

因为我这个是英文项目，没有考虑中文字符，如果存在中文字符还需要特别处理，更多请参考下面的文章。