vue3+Element Plus项目中给el-input-number组件增加数字单位显示

实现方式是在 el-input__wrapper 节点中直接 appendChild 一个新节点。

主要代码：

const { proxy } = getCurrentInstance()
onMounted(() => {
  nextTick(() => {
    let unitNode = null
    watch(() => props.unit, (val) => {
      if (!val) {
        if (unitNode) {
          unitNode.remove()
        }
      } else {
        const input__wrapper = proxy.$el.getElementsByClassName('el-input__wrapper')
        if (input__wrapper.length) {
          if (!unitNode) {
            unitNode = document.createElement('span')
            unitNode.className = 'number-unit'
            input__wrapper[0].appendChild(unitNode)
          }
          unitNode.innerHTML = val
        }
      }
    }, { immediate: true })
  })
})

可选样式：

.number-unit{
  padding-left: 8px;
  color: #999;
  white-space: nowrap;
}