vue3如何获取文本行数

   // 获取文本行数 

  // 获取文本行数
    function calculateLines(text, fontSize, lineHeight, containerWidth) {
      const canvas = document.createElement("canvas"); // 创建虚拟画布
      const context: any = canvas.getContext("2d");
      context.font = `${fontSize}px Arial`; // 设置字体样式及大小
      const lines: any[] = []; // 存放每行文本内容的数组
      let currentLine: any = ""; // 当前正在处理的行文本内容
      for (let i = 0; i < text.length; i++) {
        const char = text[i];
        if (char === "\n") {
          // 遇到换行符时结束当前行
          lines.push(currentLine);
          currentLine = "";
          continue;
        }
        const width = context.measureText(currentLine + char).width; // 获取当前行加上该字符所需要的宽度
        if (width > containerWidth) {
          // 如果超出了容器宽度，则将当前行添加到lines数组中，并开始新的一行
          lines.push(currentLine);
          currentLine = char;
        } else {
          currentLine += char; // 否则将该字符添加到当前行
        }
      }
      lines.push(currentLine); // 最后将未完成的行也添加进去
      return lines.length; // 返回行数
    }

    // 示例用法   

   var text = "这是一段包含多行文本的示例";
    var fontSize = 14;
    var lineHeight = 20;
    var containerWidth = 300;

    console.log(
      `${text} 共占用 ${calculateLines(
        text,
        fontSize,
        lineHeight,
        containerWidth
      )} 行`
    );