Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形

news2024/11/27 11:47:05

el-input-number 属性 controls-position 值为 right 时;

<el-input-number v-model="num" controls-position="right" :min="1" :max="10"></el-input-number>

原生效果
在这里插入图片描述
修改后效果
在这里插入图片描述
CSS 修改

.el-input-number {
    .el-input-number__increase {// 上 按钮
        top: 2px;
        .el-icon-arrow-up:before {// 三角形
            content: '';
            display: inline-block;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 6px 4px 6px 4px;
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) #999999 rgba(0,0,0,0);
            transform: translateY(-3px);
        }
    }
    .el-input-number__decrease {//下 按钮
        bottom: 2px;
        .el-icon-arrow-down:before {// 三角形
            content: '';
            display: inline-block;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 6px 4px 6px 4px;
            border-color: #999999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
            transform: translateY(3px);
        }
    }
}

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

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

相关文章

医院订餐平台:为患者提供贴心服务的创新解决方案

在现代医疗服务中&#xff0c;患者的就餐问题一直是一个备受关注的议题。传统的医院饮食服务往往面临着餐品单一、服务不及时等问题&#xff0c;无法满足患者的个性化需求。为了提高患者的就餐体验&#xff0c;医院订餐平台应运而生&#xff0c;通过数字化、个性化的服务&#…

Mac M2安装 Windows

由于需要在 Windows 上使用一些软件&#xff0c;今天在 Mac M2 上安装了 Windows 11。以前在 X86 Mac 上安装很容易&#xff0c;都是 X86 架构随便找个镜像安装上就可以用了。到了 M1/M2 Arm 架构就会麻烦一些&#xff0c;先在网上找到 Windows 10 Arm 架构的安装镜像&#xff…

LVGL9.1移植STM32F103C8T6花屏问题解决

这一次的话算是花了一下午差不多解决了一个问题&#xff0c;具体我是用 stm32f103c8t6(20k RAM, 128k Flash) 移植的LVGL库(屏幕是240x240的st7789, 因为RAM的buf不太够所以缩小了显示面积) 直接切入主题: 如果出现花屏问题&#xff0c; 这个问题出在你自定义编写的lv_set_flu…

搜维尔科技:【煤矿安全仿真】煤矿事故预防处置VR系统,矿山顶板灾害,冲击地压灾害等预防演练!

产品概述 煤矿事故预防处置VR系统 系统内容&#xff1a; 事故预防处置VR系统的内容包括&#xff1a;火灾的预防措施、火灾预兆、防灭火系统、火灾案例重现、顶板事故预兆、顶板事故原因、顶板事故案例重现、瓦斯概念及性质、瓦斯的涌出形式、瓦斯预兆、瓦斯爆炸条件及预防措…

文献速递:深度学习肝脏肿瘤诊断---动态对比增强 MRI 上的自动肝脏肿瘤分割使用 4D 信息:基于 3D 卷积和卷积 LSTM 的深度学习模型

Title 题目 Automatic Liver Tumor Segmentation on Dynamic Contrast Enhanced MRI Using 4D Information: Deep Learning Model Based on 3D Convolution and Convolutional LSTM 动态对比增强 MRI 上的自动肝脏肿瘤分割使用 4D 信息&#xff1a;基于 3D 卷积和卷积 LSTM …

nvm安装详细教程(安装nvm、node、npm、cnpm、yarn及环境变量配置)

一、安装nvm 1. 下载nvm 点击 网盘下载 进行下载 2、双击下载好的 nvm-1.1.12-setup.zip 文件 3.双击 nvm-setup.exe 开始安装 4. 选择我接受&#xff0c;然后点击next 5.选择nvm安装路径&#xff0c;路径名称不要有空格&#xff0c;然后点击next 6.node.js安装路径&#…

案例三 BeautifulSoup之链家二手房

本案例用到列表&#xff0c;函数&#xff0c;字符串等知识点&#xff0c;知识点参考链接如下&#xff1a; python基础知识&#xff08;一&#xff09;&输入输出函数 python基础知识&#xff08;二&#xff09;&基本命令 python基础知识&#xff08;三&#xff09;&…

.[[backup@waifu.club]].svh勒索病毒数据怎么处理|数据解密恢复

尊敬的读者&#xff1a; 近年来&#xff0c;随着信息技术的迅猛发展&#xff0c;网络安全问题日益凸显&#xff0c;其中勒索病毒成为了一大威胁。.[[backupwaifu.club]].svh、.[[MyFilewaifu.club]].svh勒索病毒就是其中之一&#xff0c;它以其独特的传播方式和恶劣的加密手段…

嵌入式驱动学习第七周——pinctrl子系统

前言 pinctrl子系统用来控制每个端口的复用功能和电气属性&#xff0c;这篇博客来介绍一下pinctrl子系统。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨…

java数据结构与算法刷题-----LeetCode461. 汉明距离

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 异或统计1的个数2. 位移操作处理3. Brian Kernighan算法 位运…

构建强大的物联网平台系统架构:关键步骤与最佳实践

随着物联网&#xff08;IoT&#xff09;技术的快速发展和广泛应用&#xff0c;越来越多的企业开始意识到搭建一个强大而可靠的物联网平台系统架构的重要性。一个完善的物联网平台可以帮助企业高效地管理和监控各种连接设备&#xff0c;并实现数据的收集、处理和分析。在本文中&…

个人劳保用品穿戴检测系统 安全帽、工服、面罩、防护手套、防护鞋、安全背带穿戴检测等

背景 在工业生产、医疗护理、消防救援等高风险领域&#xff0c;正确穿戴个人防护装备或劳保用品&#xff08;PPE&#xff1a;Personal Protective Equipment&#xff09;是保障人员安全的重要措施&#xff0c;如安全帽、反光衣、安全背带等。然而&#xff0c;现实中往往会出现…

数据结构之排序了如指掌(一)

目录 题外话 正题 排序概念 稳定性 直接插入排序 直接插入排序代码详解 直接插入排序复杂度分析 希尔排序(缩小增量排序) 希尔排序代码详解 小结 题外话 昨晚肚子疼没睡好,今天博客写的确实有点晚(找个借口),我一定会坚持,不辜负热爱我的家人们!! 正题 排序概念 一串…

去掉el-date-picker弹窗默认回显当前月份的方法

打开日期弹窗&#xff0c;默认会显示当前月份&#xff0c;如图 会发现加了穿透&#xff1a;&#xff1a;v-deep 样式也不生效 .el-month-table .today .cell {color: pink&#xff1b;font-weight: 400;}要让 popper-class“xclass” :append-to-body“false” 这俩配合着使用…

[Kubernetes[K8S]集群:Slaver从节点初始化和Join]:添加到主节点集群内

文章目录 操作流程&#xff1a;上篇主节初始化地址&#xff1a;前置&#xff1a;Docker和K8S安装版本匹配查看0.1&#xff1a;安装指定docker版本 **[1 — 8] ** [ 这些步骤主从节点前置操作一样的 ]一&#xff1a;主节点操作 查看主机域名->编辑域名->域名配置二&#x…

StylizedGS: Controllable Stylization for 3D Gaussian Splatting

StylizedGS: Controllable Stylization for 3D Gaussian Splatting StylizedGS&#xff1a;3D高斯溅射的可控样式化 Dingxi Zhang, Zhuoxun Chen, Yu-Jie Yuan, Fang-Lue Zhang, Zhenliang He, Shiguang Shan, and Lin Gao1 张定西&#xff0c;陈卓勋&#xff0c;袁玉洁&#x…

赋能力量,幸福花开 ——罗湖区懿米阳光开启全职妈妈社工培育计划

最美人间四月天&#xff0c;不负春光不负卿。 四月&#xff0c;迎来了全国社会工作师考试报名的日子&#xff0c;罗湖区全职妈妈妇联与罗湖区阳光妈妈妇联在服务过程中发现&#xff0c;全职妈妈们有获得社会工作师职业资格证的需求&#xff0c;为了更好地针对这一需求&#xf…

关于部署ELK和EFLKD的相关知识

文章目录 一、ELK日志分析系统1、ELK简介1.2 ElasticSearch1.3 Logstash1.4 Kibana&#xff08;展示数据可视化界面&#xff09;1.5 Filebeat 2、使用ELK的原因3、完整日志系统的基本特征4、ELK的工作原理 二、部署ELK日志分析系统1、服务器配置2、关闭防火墙3、ELK ElasticSea…

使用 Axios 处理 AxiosError 的三种常见方法

在使用 Axios 时处理 AxiosError 有几种常见的方法: 使用 try-catch 语句捕获异常: try {const response await axios.get(/api/data);// 处理响应数据 } catch (error) {if (error.response) {// 请求成功但状态码不在 2xx 范围console.log(error.response.data);console.l…

三款好用的 Docker 可视化管理工具

文章目录 1、Docker Desktop1.1、介绍1.2、下载地址1.3、在Windows上安装Docker桌面1.4、启动Docker Desktop1.5、Docker相关学习网址 2、Portainer2.1、介绍2.2、安装使用 3、Docker UI3.1、介绍3.2、安装使用3.2.1、常规方式安装3.2.2、通过容器安装 Docker提供了命令行工具&…