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 分钟前
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
前端·uni-app·html
程序员秘密基地21 分钟前
基于vscode,idea,java,html,css,vue,echart,maven,springboot,mysql数据库,在线考试系统
java·vue.js·spring boot·spring·web app
小妖66624 分钟前
html 滚动条滚动过快会留下边框线
前端·html
heroboyluck38 分钟前
Svelte 核心语法详解:Vue/React 开发者如何快速上手?
前端·svelte
海的诗篇_39 分钟前
前端开发面试题总结-JavaScript篇(二)
开发语言·前端·javascript·typescript
琹箐1 小时前
ant-design4.xx实现数字输入框; 某些输入法数字需要连续输入两次才显示
前端·javascript·anti-design-vue
程序员-小李1 小时前
VuePress完美整合Toast消息提示
前端·javascript·vue.js
Uyker2 小时前
从零开始制作小程序简单概述
前端·微信小程序·小程序
Dontla5 小时前
为什么React列表项需要key?(React key)(稳定的唯一标识key有助于React虚拟DOM优化重绘大型列表)
javascript·react.js·ecmascript
EndingCoder6 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架