实现的效果图:
1.防止出现hover图标时,图标一动一动的效果,宽度高度要写在svg最外层的div上,hover只写背景颜色
实现的html代码:
<div @click="handleButtonClick()" @mouseenter="changeNameStatus('edithoverFileName')"
@mouseleave="changeNameStatus('editFilleName')" class="edit-icon" v-if="editInputStatus">
<svg-icon :icon-class="editFileNameIcon" class="edit-name-icon" />
</div>
实现的js代码:
data() {
return {
editFileNameIcon:'editFilleName',
}
},
methods:{
changeFileNameStatus(){
this.editFilleName = svgFileName;
},
}
实现的css代码:
.edit-icon{
width: 26px;
height: 30px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 13px;
cursor: pointer;
&:hover{
background: rgba(0, 0, 0, 0.1);
}
}