el-input-number 添加单位

最新推荐文章于 2024-06-06 17:27:47 发布

啵啵怪_

最新推荐文章于 2024-06-06 17:27:47 发布

阅读量1.5k

点赞数 1

分类专栏： VUE项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45609659/article/details/132879838

版权

VUE项目专栏收录该内容

15 篇文章 1 订阅

订阅专栏

效果：
在这里插入图片描述
数字长的时候也不会遮挡后面单位

1、使用css，代码

<el-form-item
  label="功率 "
   >
     <el-row>
       <el-col :span="4">
         <el-switch
           v-model="formData.powerEnable"
           :active-value="1"
           :inactive-value="0"
         />
       </el-col>
       <el-col
         :span="20"
         v-show="formSysData.powerEnable"
       >
       		<el-input-number v-model="formSysData.powerValue"
	          :controls="false"
	          :min="0"
	          :max="100"
	          :precision="0" 
	          size="small" 
	          class="my-el-input-number">
	       	</el-input-number>
       </el-col>
  	</el-row>
</el-form-item>

//样式
<style>
	.my-el-input-number {
    position: relative;
    width: 100% !important;
  .el-input {
    width: 100% !important;
    .el-input__inner {
      padding-right: 35px;
    }
  }
}
.my-el-input-number::after {
  color: #666666;
    content: '%';
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
</style>

2、添加dom元素

<el-input-number
	id="rebateInput"
  	class="power-input-number"
  	v-model="formSysData.powerValue"
  	:controls="false"
  	:min="0"
	:max="100"
  	:precision="0"
>

  methods: {
    addCompany() {
      const span = document.createElement('span')
      const innerspan = document.createElement('span')
      const textspan = document.createElement('span')

      span.setAttribute('class', 'el-input__suffix')
      // span.setAttribute('style', 'right:36px');
      innerspan.setAttribute('class', 'el-input__suffix-inner')

      span.append(innerspan)
      innerspan.append(textspan)
      textspan.append('[W]')
      document.getElementById('rebateInput') && document.getElementById('rebateInput').lastElementChild.prepend(span)
    },
 },  
 mounted() {
  this.addCompany()
 }

//样式
.power-input-number {
  width: 100% !important;
  .el-input {
    width: 100% !important;
    .el-input__inner {
      padding-right: 35px;
    }
  }
}