el-input-number添加后缀

你这-坏孩子

已于 2022-12-30 11:29:26 修改

阅读量3.4k

点赞数 6

文章标签：前端 vue.js javascript

于 2022-12-27 14:29:35 首次发布

本文链接：https://blog.csdn.net/qq_37236241/article/details/128455417

版权

实现效果：

具体的实现思路，在el-input-number，后面加一个div，外面包裹一个div,去除el-input-number的外边框等，最外层div增加边框

<div  class="mo-input--number">
   <el-input-number
   v-model="value"
   placeholder="请输入" 
   controls-position="right"
   clearable>
   </el-input-number>
   <div class="define-append">万元</div>
</div>

style


<style lang="scss" scoped>

  /* 自定义数字输入框append  */
  .mo-input--number {
    border: 1px solid #DCDFE6;
    width: 100%;
    display: flex;
    border-radius: 4px;
    .el-input-number--mini{
      flex: 1;
    }
    ::v-deep .el-input__inner{
      border: none!important;
    }
  }

  .define-append{
    width: 40px;
    display: inline-block;
    background: #F5F7FA;
    padding: 0px 3px;
    border-left: none;
    height: 32px;
    line-height: 32px;
    color: #909399;
    font-size: 12px;
    text-align: center;
  }
</style>