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

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

原创最新推荐文章于 2024-05-10 13:13:32 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #ecmascript

JavaScript/TypeScript 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何为动态响应式表格实现表头宽度的自动调整。通过计算后台返回字符串的实际渲染字符宽度，并结合CSS的`min-width`属性，确保宽度在100px到200px之间。核心方法是扩展String原型，添加`pxWidth`方法来计算文本在页面的像素宽度。对于英文项目，已考虑字体样式和额外的间距。对于中文字符，需要额外处理。

需求

公司项目需求是要做动态响应式表头，因此就要动态渲染表格表头宽度在一定范围内(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 + ''
      }
    },

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