ElInputNumber 添加单位

需求需要 给 ElInputNumber 加个单位，文档没找见有相关的slot，试图直接百度个可用的，
然后发现了这篇文章

el-input-number中添加suffix

看着还行，js操作dom添加了下，实际我想直接css控制的，

直接简单实现下吧，开始想着直接after + css变量

.el-input-number > .el-input::after {
  content: var(--el-input-number-unit);
  position: absolute;
  right: 38px;
  color: #8D8D8D;
}

用的话就是

 <ElInputNumber style="--el-input-number-unit: '米'" />

然而 content居然不支持css变量，我也是才知道，然后又查了一下，发现个 counter()，或许可行？
小tips: 如何借助content属性显示CSS var变量值

.el-input-number > .el-input::after {
  counter-reset: unit var(--el-input-number-unit);
  content: counter(unit);
  position: absolute;
  right: 38px;
  color: #8D8D8D;
}

还是不行…
直接上MDN看看吧 ::after (:after)

attr() 貌似可行，试了下确实可行，但是 attr() 只能获取当前节点的属性
那就直接应用到父级吧，再处理一点细节~

需要注意的是：这个示例仅在 element-plus 1.0.2-beta.71 测试过，新版本（2.2.27）大概看了下DOM结构没啥变化，主要就是一些尺寸需要注意吧

css 部分

.el-input-number[data-unit] {
  --el-input-number-unit-offset-x: calc(40px + 4px);
}
.el-input-number--small[data-unit] {
  --el-input-number-unit-offset-x: calc(32px + 4px);
}
.el-input-number[data-unit]::after {
  content: attr(data-unit);
  position: absolute;
  top: 0;
  right: var(--el-input-number-unit-offset-x);
  color: #8D8D8D;
  height: 100%;
  display: flex;
  align-items: center;
}
.el-input-number[data-unit] .el-input__inner {
  padding-right: calc(1em + var(--el-input-number-unit-offset-x) + 4px);
}

声明式组件

 <ElInputNumber data-unit="米" />

渲染函数

h(ElInputNumber, { 'data-unit': '米' })

最后问下可爱的猫娘吧~

看完给我心里一咯噔，我寻思我眼花了没看见问文档中有这个unit？

不过我也疑惑 element-plus 为啥不加这个功能吧，可能通用性不是很高… 实际设计方面也可以考虑单位外置
如果你对这个猫娘有兴趣，可以试试 chat_gpt_oicq ~~~