el-input-number 添加单位

news2024/11/17 4:36:21

效果:
在这里插入图片描述
数字长的时候也不会遮挡后面单位
在这里插入图片描述
1、使用css,代码

<el-form-item
  label="功率 "
   >
     <el-row>
       <el-col :span="4">
         <el-switch
           v-model="formData.powerEnable"
           :active-value="1"
           :inactive-value="0"
         />
       </el-col>
       <el-col
         :span="20"
         v-show="formSysData.powerEnable"
       >
       		<el-input-number v-model="formSysData.powerValue"
	          :controls="false"
	          :min="0"
	          :max="100"
	          :precision="0" 
	          size="small" 
	          class="my-el-input-number">
	       	</el-input-number>
       </el-col>
  	</el-row>
</el-form-item>

//样式
<style>
	.my-el-input-number {
    position: relative;
    width: 100% !important;
  .el-input {
    width: 100% !important;
    .el-input__inner {
      padding-right: 35px;
    }
  }
}
.my-el-input-number::after {
  color: #666666;
    content: '%';
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
</style>

2、添加dom元素

<el-input-number
	id="rebateInput"
  	class="power-input-number"
  	v-model="formSysData.powerValue"
  	:controls="false"
  	:min="0"
	:max="100"
  	:precision="0"
>

  methods: {
    addCompany() {
      const span = document.createElement('span')
      const innerspan = document.createElement('span')
      const textspan = document.createElement('span')

      span.setAttribute('class', 'el-input__suffix')
      // span.setAttribute('style', 'right:36px');
      innerspan.setAttribute('class', 'el-input__suffix-inner')

      span.append(innerspan)
      innerspan.append(textspan)
      textspan.append('[W]')
      document.getElementById('rebateInput') && document.getElementById('rebateInput').lastElementChild.prepend(span)
    },
 },  
 mounted() {
  this.addCompany()
 }

//样式
.power-input-number {
  width: 100% !important;
  .el-input {
    width: 100% !important;
    .el-input__inner {
      padding-right: 35px;
    }
  }
}

参考文章:dom版 css版

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

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

相关文章

反转单链表

思路图1&#xff1a; 代码&#xff1a; struct ListNode* reverseList(struct ListNode* head){if(headNULL)//当head是空链表时 {return head; }struct ListNode* n1NULL;struct ListNode* n2head;struct ListNode* n3head->next;if(head->nextNULL)//当链表只有一个节…

【解刊】IEEE旗下Trans系列,中科院1区TOP,国人占比79.388%排名第一!(附IEEE名单)

计算机领域 • 好刊解读 IEEE Transactions on Cybernetics 出版社&#xff1a;IEEE ISSN&#xff1a;2168-2267 eISSN&#xff1a;2168-2275 检索数据库&#xff1a;SCIE&EI 双检 数据库检索年份&#xff1a;2013年 出刊频率&#xff1a;月刊&#xff0c;一年一卷&…

python之读写.docx文件实例

.docx文件是一种由Microsoft Word处理的二进制文件格式&#xff0c;取代了早期版本的.doc格式。它包含文本、图像、表格和其他文档元素&#xff0c;并用于Microsoft Office Word 2007及更高版本。 .docx文件通常使用Office Open XML标准&#xff08;ISO/IEC 29500&#xff09;…

Python爬虫从端到端抓取网页

网页抓取和 REST API 简介 网页抓取是使用计算机程序以自动方式从网站提取和解析数据的过程。这是创建用于研究和学习的数据集的有用技术。虽然网页抓取通常涉及解析和处理 HTML 文档&#xff0c;但某些平台还提供 REST API 来以机器可读格式&#xff08;如 JSON&#xff09;检…

平面设计找素材就上这6个网站

平面设计师找素材就上这6个网站&#xff0c;免费下载&#xff0c;建议收藏&#xff01; 1、菜鸟图库 https://www.sucai999.com/?vNTYxMjky 菜鸟图库是一个非常大的素材库&#xff0c;站内包含设计、办公、自媒体、图片、电商等各行业素材。网站还为新手设计师提供免费的素材…

使用sersync实现数据实时同步

使用sersync实现数据实时同步 sersync诞生过程部署前提配置rsync部署sersync配置sersync的path变量 修改sersync配置文件sersync常用参数使用服务文件实现开机自启动实时同步服务debug sersync诞生过程 sersync作者&#xff1a;前金山公司周洋(花椒直播&#xff09; 数据实时同…

(leetcode)二叉树最大深度

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 图解&#xff1a; 题目&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数…

数据挖掘十大算法

参考&#xff1a; ICDM&#xff1a;数据挖掘十大算法

go语言 实现正向代理

正向代理 我们无法访问外网 就需要VPN 这里的VPN相当于是一个代理服务器&#xff0c;我们将请求的数据给代理服务器&#xff0c;让代理帮我们转发并接收请求消息 代码 package mainimport ("fmt""io""net""net/http""strings&…

华为分布式新核心全面升级金融级PaaS能力:数字化时代“分工”再深化

文 | 螳螂观察 作者 | 李永华 金融领域一向是数字化转型升级最难啃的硬骨头&#xff0c;无数厂商在此深耕&#xff0c;但由于行业数字化需求复杂而艰深&#xff0c;实现深入突破的并不多&#xff0c;尤其是在关系到账户数据的核心系统方面&#xff0c;有所建树的少之又少。 …

Python日期处理库:掌握时间的艺术

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 日期和时间在计算机编程…

短剧推广和小说推文在哪里授权介绍

短剧推广和小说推文都属于很热门的赛道&#xff0c;都可以通过“巨量推文”进行授权 在巨量推文找到想推广的小说或者短剧后申请推广即可&#xff0c;小说需要有回填作品信息&#xff0c;短剧为全自动&#xff0c;出数据后实时同步到平台

Maven高级---分模块设计,继承(继承关系/版本锁定/自定义属性)

目录 分模块设计 继承与聚合 继承关系 ​案例​ 版本锁定 自定义属性/引用属性 分模块设计 把一个项目拆分成不同的模块 我们可以把原来一个项目包中的东西单独提出来作为一个模块,也是解耦的思想 然后我们可以通过引入依赖的方式将这两个模块引入,如下 继承与聚合 继…

JavaScript小案例-树形菜单(菜单数据为数组)

菜单层级理论上可以无限多&#xff0c;因为是递归渲染。 gif演示图&#xff1a; 代码&#xff1a; 树形菜单.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&quo…

全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一著辉少许

全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一著辉少许

第八章 排序

一、插入排序 不带哨兵 void InsertSort(int A[], int n){int i, j, temp;for (i1; i<n; i){if (A[i]<A[i-1]){temp A[i];for (ji-1; j>0 && A[j]>temp; --j){A[j1] A[j];}A[j1] temp;}} }带哨兵 void InsertSort(int A[], int n){int i, j;for (i2;…

微信小程序 实现滑块是矩形的slider组件

我发现大多数前端UI库都是圆形的滑块&#xff0c;而且圆形的滑块都没有紧贴进度条&#xff0c;都是超出了首尾端&#xff0c;所以亲自写一个矩形的滑块&#xff0c;我使用了微信小程序的wxs的事件通信写法&#xff0c;官方说这样写好&#xff0c;也不知道好哪里了。样式如下图&…

AWS入列CNCF基金会

7月27日&#xff0c;IT之家曾经报道&#xff0c;微软加入Linux旗下CNCF基金会&#xff0c;在这之后不到一个月的今天&#xff0c;亚马逊AWS也宣布&#xff0c;以铂金身份加入此基金会。 CNCF&#xff0c;全称Cloud Native Computing Fundation&#xff0c;该基金会旨在使得容器…

Java中Hashset存储原理底层深挖

上课老师讲了Hashset的添加元素方法&#xff0c;感觉不甚准确&#xff0c;于是下课扒一扒底层源码&#xff0c;这一看&#xff0c;霍&#xff01; 原来如此。现在小丁来捋一遍他的存储原理。 public boolean add(E e) {return map.put(e, PRESENT)null;} 可以看到PRESENT是一…

HTTPS 证书生成脚本详细讲解

前言 HTTPS证书的作用是用于保障网站的安全性。在HTTPS协议中&#xff0c;通过使用证书来实现客户端与服务器之间的认证和数据加密&#xff0c;防止中间人攻击、信息泄漏等安全问题的发生。https证书也就是SSL证书&#xff0c;我们首先要确定好需要 https 安全连接的域名&…