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

news2024/11/15 10:32:45

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

      <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>

清空方法:

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

css样式:

<style lang="scss" scoped>
::v-deep .el-input-number.is-without-controls .el-input__inner{
  text-align: left !important; // 左对齐
  border: none;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2081868.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

比裁员更侮辱人的事发生了。。。

在这个快节奏的时代&#xff0c;职场如战场&#xff0c;每个人都在为了生存而奋斗。但你有没有遇到过这样的情况&#xff1a;工作量突然增加&#xff0c;薪水却纹丝不动&#xff1f; 最近某位网友爆料&#xff0c;他们公司裁掉两名员工&#xff0c;一个月薪一万七&#xff0c;…

解决npm下载依赖速度慢的问题

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

CC工具箱使用指南:【DAT转要素类】

一、简介 这是一个将特定的DAT文件批量转换为GDB点要素类的工具。 用记事本打开DAT文件&#xff0c;长这样&#xff1a; 数据比较简单&#xff0c;就是一些点坐标&#xff0c;一行一个点&#xff0c;包括XYZ三个坐标。 二、工具参数介绍 点击【定制2】组里的【DAT文件转要素…

python-译码(赛氪OJ)

[题目描述] 在机器学习中&#xff0c;现在定义一种编码规则&#xff1a;对于长度为 3的字符串&#xff08;均由小写字母组成&#xff09;&#xff0c;首先按照字典序进行排序&#xff0c;即 aaa&#xff0c;aab&#xff0c;aac&#xff0c;…&#xff0c;zzz。 将这些字符串按照…

合宙LuatOS开发板使用手册——Air700EAQ

EVB-Air700EL&700EY 开发板是合宙通信推出的基于 Air700EL&700EY 模组所开发的&#xff0c; 包含电源&#xff0c;SIM 卡&#xff0c;USB&#xff0c;PCB 天线等必要功能的最小硬件系统。 以方便用户在设计前期对 模块进 行性能评估&#xff0c;功能调试&#xff0c;软…

知识图谱——语义知识库的开端(1)

从最初的 Google 搜索&#xff0c;到如今的聊天机器人、大数据风控、证券投资、智能医疗、自适应教育、推荐系统等各个领域&#xff0c;知识图谱的应用无处不在。知识图谱&#xff08;Knowledge Graph&#xff09;的概念由 Google 在 2012 年正式提出&#xff0c;旨在打造更智能…

2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~

大家好&#xff0c;我是石小石&#xff01;作为前端开发&#xff0c;vscode好比我们的衣食父母&#xff0c;不可或缺。我相信大家都试过给编译器装一些插件&#xff0c;用来提升开发效率。 这篇文章&#xff0c;我将结合自己的工作经验&#xff0c;向大家推荐我工作中用到的一…

【C++第十三课-二叉树进阶】二叉搜索树

目录 二叉搜索树概念增&#xff0c;删&#xff0c;查1、删2、查3、增 拷贝构造析构函数赋值增&#xff0c;删&#xff0c;查&#xff08;递归&#xff09;1、增&#xff08;递归&#xff09;2、删3、查 k搜索模型kv搜索模型 二叉搜索树 概念 二叉搜索树又称二叉排序树&#x…

创建微服务组件

1.1 数据库表 shop_order订单表 shop_product商品表 shop_user⽤户表 1.2 服务模块 1.2.1 创建模块 创建公共⽗模块springcloud_alibaba 创建公共模块 shop_common ,⽤于存放公共的实体类和⼯具类 创建订单微服务模块 shop_order 端⼝809X 创建商品微服务模块 shop_product …

同鑫eHR人力资源管理系统 GetFlowDropDownListItems SQL注入漏洞复现

0x01 产品简介 同鑫eHR,聚焦人力资源管理痛点,首创提出人力资源管理系统一体化概念,打造应用一体化、数据一体化、流程一体化、终端一体化的人力资源管理系统一体化解决方案。为广大企业解决系统功能分散不同步、业务数据零散无价值、流程可自定义程度低、行业深度问题无法…

【ceph学习】ceph如何进行数据的读写(1)

版本 ceph版本为17. ceph如何进行读写接口的实现 Ceph的客户端通过librados的接口进行集群的访问&#xff0c;这里的访问包括&#xff1a; 1&#xff09;对集群的整体访问 2&#xff09;对象的访问 两类接口&#xff0c;这套接口&#xff08;API&#xff09;包括C、C和Pytho…

在读本科生可以考PMP吗?

PMP认证与学历无关&#xff0c;但在报考条件上需要留意以下几点&#xff1a; 学历要求&#xff1a;年满23周岁/高中毕业5年以上/ 大专毕业3年以上&#xff0c;只需满足其中一个条件即可&#xff1b; 证明要求&#xff1a;必须具备35学时&#xff08;PDU&#xff09;证明&…

值得收藏 猫咪浮毛异味难清理?三种有效的除毛工具来帮你

养猫一时爽&#xff0c;除毛火葬场&#xff01;我接老大布偶回家以来&#xff0c;都没怎么掉毛&#xff0c;还挺开心的。然后觉得可以负担得起第二只小猫&#xff0c;就养多一只老二银渐层。结果没接回来多久&#xff0c;我的”报应“来了...遇上换毛季&#xff0c;两只猫像是觉…

操作系统识别——CSP-J1真题讲解

【题目】 以下哪个不是操作系统?( ) A. Linux B. Windows C. Android D. HTML 【答案】 D 【解析】 操作系统&#xff08;Operating System&#xff0c;缩写&#xff1a;OS&#xff09;相当于电脑的管家&#xff0c;管理着计算机的硬件与软件资源&#xff0c;以供电…

分享一个基于springboot的中小学数字化教学资源管理平台java互动式教学资源学习与交流平台(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

俄罗斯市场应用程序翻译的特点

向俄罗斯市场扩张为应用程序开发人员带来了一系列独特的挑战和机遇。俄罗斯人口众多&#xff0c;精通技术&#xff0c;具有巨大地增长潜力。然而&#xff0c;为了在这个市场上取得成功&#xff0c;开发人员必须确保他们的应用程序得到有效地翻译和本地化&#xff0c;以满足俄罗…

【IoT】将各类遥控器(红外,频射,蓝牙,wifi,Zigbee)等设备接入米家,实现家庭物联网设备控制(以极米Z7X投影仪为例)

【IoT】将各类遥控器&#xff08;红外&#xff0c;频射&#xff0c;蓝牙&#xff0c;wifi&#xff0c;加密&#xff09;等设备接入米家&#xff0c;实现家庭物联网设备控制&#xff08;以极米Z7X投影仪为例&#xff09; 文章目录 1、三种主流遥控方式&#xff08;红外&#xff…

差旅费用报销之合规性管理

除了在差旅报销流程简化和效率提升方面表现抢眼&#xff0c;差旅费用报销平台分贝通在报销方案的合规性管理方面也有自己的“专长”&#xff0c;以确保合作企业的费用报销流程符合预算规则和法规政策&#xff0c;降低差旅管理成本和风险。 费用报销合规性之政策合规 首先&…

信息安全数学基础(1)整除的概念

前言 在信息安全数学基础中&#xff0c;整除是一个基础且重要的概念。它涉及整数之间的特定关系&#xff0c;对于理解数论、密码学等领域至关重要。以下是对整除概念的详细阐述&#xff1a; 一、定义 设a, b是任意两个整数&#xff0c;其中b ≠ 0。如果存在一个整数q&#xff0…

C++ | Leetcode C++题解之第375题猜数字大小II

题目&#xff1a; 题解&#xff1a; class Solution { public:int getMoneyAmount(int n) {vector<vector<int>> f(n1,vector<int>(n1));for (int i n - 1; i > 1; i--) {for (int j i 1; j < n; j) {f[i][j] j f[i][j - 1];for (int k i; k &l…