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