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

最新推荐文章于 2026-06-11 17:16:46 发布

原创最新推荐文章于 2026-06-11 17:16:46 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #javascript

前端专栏收录该内容

1 篇文章

订阅专栏

文章描述了如何在Vue组件的el-input__wrapper中使用watch和DOM操作来动态插入或移除单位标签，当props.unit值变化时更新单位显示。

实现方式是在 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;
}