js根據長度並計算渲染px width寬度

需求

公司項目需求是要做動態響應式表頭,因此就要動態渲染表格表頭寬度在一定範圍內(100px-200px)。
完整實現圖:
image

實現過程

這裏就不講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 + ''
      }
    },

因爲我這個是英文項目,沒有考慮中文字符,如果存在中文字符還需要特別處理,更多請參考下面的文章。

參考鏈接

js獲取字符長度並計算px寬度

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章