Input 输入框输入表情时，长度计算错误

[hekang456]

trafficstars

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

any

Reproduction link

https://github.com/vueComponent/ant-design-vue

Steps to reproduce

在Input中输入表情😊的时候，长度计算会和实际输入的字符个数不一样。比如限制20个字符，输入10个表情后就不可以输入了。

What is expected?

表情能输入的个数比预期少一半

What is actually happening?

表情能正确计数。

---

function fixControlledValue(value: string | number) { if (typeof value === 'undefined' || value === null) { return ''; } return String(value); } 这里，'😊' 是一个字符串，包含一个笑脸表情符号。fixControlledValue('😊') 将返回这个字符串本身，因为 '😊' 已经是一个字符串了。然后，[...string] 会将字符串转换为一个字符数组（在这个上下文中，😊 被视为一个单一的字符，尽管它实际上可能由多个 Unicode 码点组成，但在 JavaScript 的字符串迭代中，它通常被视为一个单一的“字符”）。因此，.length 将返回 1，因为数组中只有一个元素（即那个笑脸表情符号）。

[cc-hearts]

'😊'.length // result is 2

🤔 不过可以提供 function 的方式自定义

[cc-hearts]

原来已经提供了 formatter 的方式，我完善了一下文档。 数据类型如下：

interface Props {
  showCount: { formatter: (info: { value: string, count: number, maxlength?: number }) => VNode }
}

[hekang456]

因为textarea把表情当一个字符，这个也更加符合直觉，所以使用formatter 计算长度可能不太合适，因为一个表情会显示长度为2。我按照textarea的方法，对vc-input进行了处理，pr是https://github.com/vueComponent/ant-design-vue/pull/7782，请您看一下。

[cc-hearts]

感谢提醒， emoji的 length 判断是很复杂的

[...'🧑‍🌾'].length

// ['🧑', '‍', '🌾']

所以不能使用 [...emojiStr].length 的方式判断。

框架无法 case 所有的字符串计算情况，因此框架的默认 length 取值应该保持简单的逻辑判断， 并且通过 formatter 的 function 方式提供用户自行判断 length 。

[hekang456]

的确是这样，如果是双字符的表情，textarea 还是可以正常展示的，但是更多字符的表情，就会产生错误。所以这个计算长度还是不太行

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.