获取焦点状态
自定义指令
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;
}