el-input-number,增加清空icon按钮,输入值居左(左对齐)、去除控制按钮

:controls="false",不使用控制按钮;

html 复制代码
      <div>
        <span class="label">金额</span>
        <div
          style="width: 100%;border: solid 1px rgba(0, 0, 0, 0.1); border-radius: 4px; display: flex;align-items: center;"
        >
          <el-input-number
            v-model.trim="queryParams.amount"
            placeholder="请输入交易金额"
            :controls="false"
            size="small"
            @keyup.enter.native="handleQuery"
          />
          <i
            class="el-icon-circle-close"
            style="margin: 5px;color: rgba(0, 0, 0, 0.3);"
            @click="clearInputNumber('amount')"
          ></i>
        </div>
      </div>

清空方法:

javascript 复制代码
    clearInputNumber (property) {
      // console.log("🚀 ~ clearInputNumber ~ property:", property)
      this.queryParams[property] = undefined
    },

css样式:

css 复制代码
<style lang="scss" scoped>
::v-deep .el-input-number.is-without-controls .el-input__inner{
  text-align: left !important; // 左对齐
  border: none;
}
</style>
相关推荐
看到我请叫我铁锤1 天前
vue3中THINGJS初始化步骤
前端·javascript·vue.js·3d
q***25211 天前
SpringMVC 请求参数接收
前端·javascript·算法
q***33371 天前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
烛阴1 天前
从`new()`到`.DoSomething()`:一篇讲透C#方法与构造函数的终极指南
前端·c#
还债大湿兄1 天前
阿里通义千问调用图像大模型生成轮动漫风格 python调用
开发语言·前端·python
谢尔登1 天前
defineProperty如何弥补数组响应式不足的缺陷
前端·javascript·vue.js
蓝瑟忧伤1 天前
前端技术新十年:从工程体系到智能化开发的全景演进
前端
Baklib梅梅1 天前
员工手册:保障运营一致性与提升组织效率的核心载体
前端·ruby on rails·前端框架·ruby
涔溪1 天前
实现将 Vue2 子应用通过无界(Wujie)微前端框架接入到 Vue3 主应用中(即 Vue3 主应用集成 Vue2 子应用)
vue.js·微前端·wujie
IT_陈寒1 天前
Redis性能翻倍的5个冷门技巧,90%开发者都不知道第3个!
前端·人工智能·后端