element plus 输入框样式模仿Material-UI

获取焦点状态
在这里插入图片描述

自定义指令

app.directive('focus', {  
  // 当被绑定的元素插入到 DOM 中时……  
  mounted(el) {  
    const descendants = el.querySelectorAll('.el-input__inner'); 
    var cssClass = 'newLable';
    el.classList.add(cssClass); 
    // 遍历并操作这些子孙节点  
    descendants.forEach((descendant) => { 
      // 这里可以根据需要进行任何操作,比如改变样式  
      // 或者添加事件监听器等  
      descendant.addEventListener('focus', () => {  
        console.log(el.childNodes[2]);
        el.childNodes[2].style.transform="scale(0.8)";
        el.childNodes[2].style.marginTop="-0.5rem";
        el.childNodes[2].style.background = '#fff'
        el.childNodes[2].style.color = '#1e90ff'
        el.childNodes[2].style.opacity="1";      
      });
      descendant.addEventListener('blur', () => {
        if(descendant.value==""){
          el.childNodes[2].style.color= '#c9bfbf';
          el.childNodes[2].style.transform="scale(1)";
          el.childNodes[2].style.marginTop="";
          el.childNodes[2].style.background = 'none'
          el.childNodes[2].style.opacity="0.8";
        }
      });  
    });  
  },  
  unmounted(el) {  
    // 移除事件监听器  
    const descendants = el.querySelectorAll('.el-input__inner'); 
    descendants.forEach((descendant) => {
      descendant.removeEventListener('focus', () => {});
      descendant.removeEventListener('blur', () => {});
     }); 
  },
  // 当指令所在的元素或其子元素更新时,更新函数将被调用  
  updated(el) {  
    // 根据需要执行更新操作  
  }  
}); 

全局样式

.el-form-item{
   position: relative !important;
}
.newLable /deep/.el-form-item__label{
   position:absolute ;
   z-index: 99;
   opacity:0.8;
    justify-content:flex-start;
    transition: all .2s ease-in-out ;
    color: #c9bfbf ;
    margin-left: 10px ;
     height: 1rem;
     align-items: center;
    margin-top: 0.5rem;
    -webkit-background-clip: content-box !important;
    background-clip: content-box !important;

}

.newLable /deep/ .el-input__inner::placeholder{
   opacity:0;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(24年4月2日更新)Linux安装chrome及chromedriver(Ubuntu20.0416.04)

一、安装Chrome 1)先执行命令下载chrome: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb2)安装chrome sudo dpkg -i google-chrome-stable_current_amd64.deb踩坑:这里会提示如下报错&…

安卓主板MT8390(Genio 700)_MTK联发科Linux开发板方案

MediaTek Genio 700 (MT8390)是一款高性能的边缘 AI 物联网平台,专为智能家居、互动零售、工业与商业应用而设计。提供快速响应的边缘计算能力、先进的多媒体功能、广泛的传感器和连接方式,且支持多任务操作系统。 MT8390安卓核心…

ArrayList扩容原理

ArrayList源码分析 分析ArrayList源码主要从三个方面去翻阅:成员变量,构造函数,关键方法 以下源码都来源于jdk1.8 1 成员变量 DEFAULT_CAPACITY 10; 默认初始的容量**(CAPACITY) EMPTY_ELEMENTDATA {}; 用于空实例的共享空数组实例 DEFAU…

Java项目:85 springboot智能物流管理系统

作者主页:舒克日记 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本美发门店管理系统有管理员和用户两个角色。 用户功能有项目预定管理,产品购买管理,会员充值管理,余额查询管理。…

文本自动粘贴编辑器:支持自动粘贴并筛选手机号码,让信息处理更轻松

在信息时代的浪潮中,文本处理已成为我们日常工作与生活的重要组成部分。无论是商务沟通、社交互动还是个人事务处理,手机号码的筛选与粘贴都显得尤为关键。然而,传统的文本处理方式效率低下、易出错,已无法满足现代人的高效需求。…

Linux(05) Debian 系统修改主机名

查看主机名 方法1:hostname hostname 方法2:cat etc/hostname cat /etc/hostname 如果在创建Linux系统的时候忘记修改主机名,可以采用以下的方式来修改主机名称。 修改主机名 注意,在linux中下划线“_”可能是无效的字符&…

disearch目录扫描工具

项目地址 GitHub - maurosoria/dirsearch: Web path scanner 安装 apt-get install dirsearch 使用 dirsearch -u http://61.147.171.105:56237/

网络协议学习——HTTPS

目录 ​编辑 一,认识HTTPS 二,加密方式 1,对称式加密 2,非对称式的加密 3,数据指纹(数据摘要) 4,数据签名 三,HTTPS的工作原理 实现方式 数字证书 一&#xff0c…

配mmdetection

总流程: 1. 安装conda 参考链接后面补上 列出可用的conda环境 conda env list 删除指定环境 conda remove --name myenv --all 创建并激活指定环境 conda create --name openmmlab python3.8 -y conda activate openmmlab 2. 装pytorch,版本别装错…

zabbix图表时间与服务器时间不一致问题

部署完zabbix后,有时候会发现zabbix服务器的时间明明是对的,但是图标的时间不对,通过以下的配置可以快速解决。 登录zabbix-nginx容器 docker exec -u root -it docker-compose-zabbix-zabbix-web-nginx-mysql-1 bash修改php配置文件 vi /e…

excel散点图怎么每个点添加名称

最终效果图: 添加图标元素->数据标签->其他数据标签选项 选择单元格中的值 手动拖动数据标签,调整到合适的位置。

javaweb学习(day11-监听器Listener过滤器Filter)

一、监听器Listener 1 Listener介绍 Listener 监听器它是 JavaWeb 的三大组件之一。JavaWeb 的三大组件分别是:Servlet 程 序、Listener 监听器、Filter 过滤器 Listener 是 JavaEE 的规范,就是接口 监听器的作用是,监听某种变化(一般就是对…

RISC-V GNU Toolchain 工具链安装问题解决(含 stdio.h 问题解决)

我的安装过程主要参照 riscv-collab/riscv-gnu-toolchain 的官方 Readme 和这位佬的博客:RSIC-V工具链介绍及其安装教程 - 风正豪 (大佬的博客写的非常详细,唯一不足就是 sudo make linux -jxx 是全部小写。) 工具链前前后后我装了…

搜维尔科技:SenseGlove Nova 允许以最简单的方式操作机器人并与物体交互

扩展 Robotics 和 QuarkXR 人机界面 XR 应用 Extend Robotics 利用扩展现实技术,让没有机器人专业知识的个人能够远程控制机器人。他们的 AMAS 解决方案使操作员能够不受地理限制地轻松控制机器人。 需要解决的挑战【搜维尔科技】 目前,操作机器人是一…

day4|gin的中间件和路由分组

中间件其实是一个方法, 在.use就可以调用中间件函数 r : gin.Default()v1 : r.Group("v1")//v1 : r.Group("v1").Use()v1.GET("test", func(c *gin.Context) {fmt.Println("get into the test")c.JSON(200, gin.H{"…

Git指令速查

一、Git初始化 作用:初始化git仓库,想要使用git对某个项目进行管理,需要git init进行初始化 # 在当前目录新建一个Git代码库,初始化仓库。 在当前目录下生成一个隐藏文件夹.git,不能修改.git下的任何东西 $ git ini…

jmeter性能压测

jvm指令 jstat -gcutil -h5 -t 1 3s 发压端的tcp这么达到1000TPS jmeter的jvm的设置

六自由度Stewart控制系统matlab仿真,带GUI界面

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 六自由度Stewart平台控制系统是一种高精度、高稳定性的运动模拟装置,广泛应用于飞行模拟、汽车驾驶模拟、虚拟现实、精密定位等领域。其工作原理基于Stewart机构&a…

利用Flutter混淆工具提高应用的反编译难度

在移动应用开发中,保护应用代码安全至关重要。Flutter 提供了简单易用的混淆工具,帮助开发者在构建 release 版本应用时有效保护代码。本文将介绍如何在 Flutter 应用中使用混淆,并提供了相关的操作步骤和注意事项。 📝 摘要 本…

Web3:数字化社会的下一步

随着技术的不断进步和互联网的发展,我们正逐渐迈入一个全新的数字化社会阶段。在这个新的时代,Web3作为数字化社会的重要组成部分,将发挥着举足轻重的作用。本文将探讨Web3在数字化社会中的意义、特点以及对未来发展的影响。 1. 重新定义数字…