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>
相关推荐
有一个好名字20 小时前
Agent Loop —— 一切从那个 while 循环开始
前端·javascript·chrome
一天睡25小时20 小时前
Claude Code 指令入门教程
前端
EF@蛐蛐堂20 小时前
【js】浏览器滚动条优化组件OverlayScrollbars
开发语言·javascript·ecmascript
yingyima20 小时前
正则表达式实战:从日志中精准提取关键字段
前端
TeamDev20 小时前
如何在 DotNetBrowser 中使用本地 AI 模型
前端·后端·.net
谢尔登21 小时前
10_从 React Hooks 本质看 useState
前端·ubuntu·react.js
辰同学ovo21 小时前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js
爱看书的小沐21 小时前
【小沐杂货铺】基于Three.js绘制三维艺术画廊3DArtGallery (Three.js,WebGL)
javascript·3d·webgl·three.js·babylon.js·三维画廊
陈随易21 小时前
2年没用Nodejs了,Bun很香
前端·后端·程序员
donecoding21 小时前
Corepack 完全解析:从懵到懂,包管理器自由了
前端·node.js·前端工程化