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>
相关推荐
777VG3 小时前
PostgreSQL +martin将多张表输出成一个 MVT
前端·数据库·postgresql
mayaairi3 小时前
JS循环语句深度解析:嵌套for、while与do...while
开发语言·前端·javascript
To_OC3 小时前
啃完流式输出:从一个卡顿的 LLM 接口开始,我搞懂了数据流到底怎么 “流”
前端·javascript·llm
阳光是sunny4 小时前
LangGraph实战教程:defer延迟节点——让收尾工作自动排到最后
前端·人工智能·后端
kyriewen4 小时前
我用了三周Claude Code Skills——总结出5条铁律,第3条最反直觉
前端·ai编程·claude
阳光是sunny4 小时前
LangGraph实战教程:控制流详解
前端·人工智能·后端
格尔曼Noah5 小时前
Safari浏览器中如何只允许指定网站下载
前端·safari
用户059540174466 小时前
用了3年Redis,才发现我一直没搞懂缓存一致性测试
前端·css
swipe6 小时前
07|(前端转后全栈)为什么后端也要缓存?从前端缓存思维理解 Redis
前端·后端·全栈
IT小盘6 小时前
05-企业项目统一接入多个大模型-适配器模式实战
前端·人工智能·适配器模式