更新记录

1.0.0（2026-09-15） 下载此版本

初版

平台兼容性

其他

SL-WX-TextStats 文本统计组件

组件简介

实时文本统计分析组件。输入文本后即时计算并展示 8 项统计指标：字符数、文字数（不含标点）、字符数（不含换行）、字符数（不含空格和换行）、行数、非空行数、UTF-8 字节数、UTF-16 字节数。2×4 卡片网格布局，数值使用等宽字体显示。H5 / 微信小程序通用。

设计说明：组件内置输入框与统计卡片展示，同时通过 default 插槽暴露完整 stats 对象，业务侧可自由选取需要的指标进行自定义渲染。

目录结构

components/SL-WX-TextStats
└── SL-WX-TextStats.vue

核心特性

• 8 项指标实时统计：输入即计算，无需手动触发。
• 文字数（不含标点）：仅统计 ASCII 字母/数字、汉字（含 CJK 扩展区）、全角字母/数字，排除所有标点符号和空白符。
• UTF-8 字节数精确计算：按 Unicode 码位逐字符计算——ASCII 1B、拉丁扩展 2B、汉字 3B、代理对（Emoji 等）4B。
• UTF-16 字节数：length × 2，代理对自然占 4 字节。
• 输入长度限制：maxlength 控制最大输入字符数，默认不限制。
• 插槽自定义：default 插槽透传 stats 对象和 text，可完全替换默认卡片布局。

Props

Events

Slots

stats 对象结构

{
  charCount: 142,              // 字符数
  letterCount: 120,            // 文字数（不含标点）
  noNewlineCount: 138,         // 字符数（不含换行）
  noSpaceNewlineCount: 130,    // 字符数（不含空格和换行）
  lineCount: 5,                // 行数
  nonEmptyLineCount: 4,        // 非空行数
  utf8Bytes: 186,              // 字节数 (UTF-8)
  utf16Bytes: 284              // 字节数 (UTF-16)
}

统计指标说明

使用示例

示例 1：基础用法

<template>
  <sl-wx-text-stats
    :text="text"
    @update:text="text = $event"
  />
</template>

<script>
import SlWxTextStats from '@/components/SL-WX-TextStats/SL-WX-TextStats.vue'

export default {
  components: { SlWxTextStats },
  data() {
    return {
      text: ''
    }
  }
}
</script>

示例 2：限制输入长度

<sl-wx-text-stats
  :text="text"
  :maxlength="200"
  @update:text="text = $event"
/>

示例 3：插槽自定义渲染

<sl-wx-text-stats :text="text" @update:text="text = $event">
  <template v-slot:default="{ stats }">
    <view class="my-stats">
      <view class="my-row">
        <text>总字符</text>
        <text>{{ stats.charCount }}</text>
      </view>
      <view class="my-row">
        <text>有效文字</text>
        <text>{{ stats.letterCount }}</text>
      </view>
      <view class="my-row">
        <text>UTF-8 字节</text>
        <text>{{ stats.utf8Bytes }}</text>
      </view>
    </view>
  </template>
</sl-wx-text-stats>

注意事项

1. 文字数（不含标点）范围：当前识别范围包括 ASCII 字母（A-Z, a-z）、数字（0-9）、汉字基本区（U+4E00–U+9FFF）、CJK 扩展 A（U+3400–U+4DBF）、全角字母（U+FF21–U+FF3A, U+FF41–U+FF5A）、全角数字（U+FF10–U+FF19）。其他 Unicode 字符（如 emoji、特殊符号）不计入文字数。

2. UTF-8 字节数：对代理对（surrogate pair，如 emoji）正确处理为 4 字节，不会因 charCodeAt 只读单个 code unit 而出错。

3. 行数计算：空字符串返回行数 1（''.split('\n') 结果为 ['']），与实际编辑器行为一致。

4. 非空行判断：使用 trim() 判断，纯空格/制表符的行视为空行。